angular.js - angular指令封装第三方插件,如何实现第三方js按需加载
本文介绍了angular.js - angular指令封装第三方插件,如何实现第三方js按需加载的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
需求是在调用某个封装了第三方插件的directive时再加载该插件相关的
js
文件,实现按需加载,但不用requireJS
。我的初期想法是,在
directive
的link
函数中利用jquery
动态加载相关js
文件,但是这样不知道文件加载完成的时间。-
相关代码如下(以封装
select2
为例)<div 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> </div>
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); } }; });
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();
});
}
};
});
解决方案
推荐ocLazyLoad,中文文档,英文文档。
这篇关于angular.js - angular指令封装第三方插件,如何实现第三方js按需加载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文