angular.js - Arahan sudut merangkum pemalam pihak ketiga, cara melaksanakan pemuatan atas permintaan bagi js pihak ketiga

Question

• 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动态加入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);
      }
    };
  });

• pautan codepen

Bagaimana untuk melaksanakan pemuatan atas permintaan separa dalam

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(); 
        }); 
    }
  };
});

Answer 1

Syorkan ocLazyLoad, dokumentasi Cina, dokumentasi Inggeris.