angulaire.js - Les instructions angulaires encapsulent les plug-ins tiers, comment implémenter le chargement à la demande de js tiers

Question

• L'exigence est de charger le fichier js lié ​​au plug-in lors de l'appel d'une directive qui encapsule le plug-in tiers, afin d'obtenir un chargement à la demande, mais sans requireJS .

• Mon idée initiale est d'utiliser directive pour charger dynamiquement les fichiers link associés dans la fonction jquery de js, mais de cette façon, je ne sais pas quand le chargement du fichier est terminé.

• Le code pertinent est le suivant (en prenant l'emballage select2 comme exemple)

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

• lien codepen

Comment implémenter le chargement partiel à la demande dans

angularJS ?

---

Eh bien, la réponse est ocLazyLoad. Ce qui suit fait partie du code modifié.
ps : Le principe est d'utiliser ajax pour demander le fichier js cible de manière asynchrone, puis de mettre le texte demandé dans la balise de script dans le fichier js cible. fonction de rappel. Rejoindre le dom et ensuite passer des appels liés au plug-in ?

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

Recommander ocLazyLoad, documentation chinoise, documentation anglaise.