Keperluan adalah untuk memuatkan fail js
yang berkaitan dengan pemalam apabila memanggil arahan yang merangkum pemalam pihak ketiga, untuk mencapai pemuatan atas permintaan, tetapi tanpa requireJS
.
Idea awal saya ialah menggunakan directive
untuk memuatkan fail link
yang berkaitan secara dinamik dalam fungsi jquery
js
, tetapi dengan cara ini saya tidak tahu bila pemuatan fail selesai.
Kod yang berkaitan adalah seperti berikut (mengambil pembungkusan select2
sebagai contoh)
<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動態(tài)加入script標簽導(dǎo)入select2源文件
//但是文件是異步加載的,無法知道什么時候加載完
$('body').append('<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></sc'+'ript>');
//現(xiàn)在用timeout等select2加載好,模擬出應(yīng)該實現(xiàn)的效果 **求各位給個正確的方案**
$timeout(function() {
$(ele).select2(); //主要為了元素可以調(diào)用這個方法,這是select2插件的初始化方法
}, 3000);
}
};
});
pautan codepen
angularJS
?
Nah, jawapannya ialah ocLazyLoad Berikut adalah sebahagian daripada kod yang diubah suai.
ps: Prinsipnya ialah menggunakan ajax untuk meminta fail js sasaran secara tidak segerak, dan kemudian meletakkan teks yang diminta ke dalam teg skrip dalam fungsi panggil balik. Sertai dom dan kemudian buat panggilan berkaitan pemalam?
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();
});
}
};
});
歡迎選擇我的課程,讓我們一起見證您的進步~~