Question

我创建了一个名为ngMap的AngularJS模块，其中两个用户要求我在需要时动态加载javascript http://maps.google.com/maps/api/js，这样用户就不必添加这个.js在需要时，在他们的页面上显示地图。

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

是否可以延迟加载指令直到加载所需的.js？

Answer 1

由于成员没有不同的答案，我想发布自己的解决方案，虽然我不确定这是好的。

我已将第三方.js相关指令包装到一个名为lazy-load的指令中，其值为script source。

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

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>

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

1 个答案: