问题描述
需求是在调用某个封装了第三方插件的directive时再加载该插件相关的js文件，实现按需加载，但不用requireJS。
我的初期想法是，在directive的link函数中利用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，中文文档，英文文档。
