angular.js - angular指令封装第三方插件,如何实现第三方js按需加载
天蓬老师
天蓬老师 2017-05-15 17:02:42
0
1
567
  • 需求是在调用某个封装了第三方插件的directive时再加载该插件相关的js文件,实现按需加载,但不用requireJS

  • 我的初期想法是,在directivelink函数中利用jquery动态加载相关js文件,但是这样不知道文件加载完成的时间。

  • 相关代码如下(以封装select2为例)

    <p ng-app="app" ng-controller="FooController as vm">
      <select my-select2 ng-model="vm.selector">
        <option value="aaaa">aaaaa</option>
        <option value="bbbb">bbbbb</option>
        <option value="cccc">ccccc</option>
      </select>
      <p ng-bind="vm.selector"></p>
    </p>
    var app = angular.module('app', []);
    app.controller('FooController', function() {
      var vm = this;
    });
    
    //自定义指令,简单封装select2, 这里只是以select2为例
    app.directive('mySelect2', function($timeout) {
      return {
        link: function(scope, ele, attr) {
         
          //目前的想法是在这儿用jq动态加入script标签导入select2源文件
          //但是文件是异步加载的,无法知道什么时候加载完
          $('body').append('<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></sc'+'ript>');
          
          //现在用timeout等select2加载好,模拟出应该实现的效果    **求各位给个正确的方案**
          $timeout(function() {
            $(ele).select2();    //主要为了元素可以调用这个方法,这是select2插件的初始化方法
          }, 3000);
        }
      };
    });
  • codepen链接

angularJS中到底该怎样实现局部按需加载?


好吧,答案就是ocLazyLoad,以下是修改之后的部分代码.
ps: 原理是不是利用ajax异步请求目标js文件,然后在回调函数中,将请求到的文本放入script标签,加入dom,然后进行插件相关的调用?

app.directive('mySelect2', function($timeout, $ocLazyLoad) {
  return {
    link: function(scope, ele, attr) {
      ele.hide();
      $ocLazyLoad.load(['https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js',
       'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css'])
       .then(function() {
            $(ele).select2(); 
        }); 
    }
  };
});
天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(1)
为情所困

推荐ocLazyLoad,中文文档,英文文档。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板