Angularjs 动态添加指令的第三方.js依赖项

我创建了一个名为AngularJS的模块，其中两个用户要求我加载javascript

http://maps.google.com/maps/api/js

在需要时动态显示，这样用户就不必在需要时将此.js添加到头部以在页面上显示地图

出现的问题是如何动态加载此脚本，然后初始化依赖于.js的指令

---

是否可以延迟加载指令直到加载required.js？

由于没有与成员不同的答案，我想发布我自己的解决方案，尽管我不确定这是否好

我已经将依赖于第三方.js的指令包装成一个名为

lazy load

的指令，其值为script source

此指令只是通过删除html并将其添加回，将脚本的初始化延迟到使用$timeout和$interval加载第三方.js

app.directive('lazyLoad', function($interval, $compile, $timeout) {
  var directiveDefinitionObject = {
    compile: function(tElement, tAttrs) {
      (!tAttrs.lazyLoad) && console.error("requires lazy-load");
      var savedHtml = tElement.html(), src = tAttrs.lazyLoad;
      if (document.querySelector("script[src='"+src+"']")) {
        return false;
      }

      tElement.html('');  // will compile again after script is loaded
      return {
        pre: function(scope, element, attrs) {
          var scriptEl = document.createElement("script");
          scriptEl.src = src;
          document.head.appendChild(scriptEl);

          var interval = $interval(function() {
            if (document.querySelector("script[src='"+src+"']")) {
              console.log('script  loaded, ' + src);
              $timeout(function() {  // give some time to execute the script
                element.html(savedHtml);
                $compile(element.contents())(scope);
                $interval.cancel(interval);               
              }, 100);
            }
          }, 100, 10);
        }
      };
    }
  };
  return directiveDefinitionObject;
});

这部分是html

<div lazy-load="http://maps.google.com/maps/api/js">
  <map center="Brampton" zoom="10">
    <marker position="Brampton"></marker>
  </map>
</div>

---

我试图用“lazy load”指令包装依赖指令，但我不确定这是一种好方法，