Question

我有一个Angular应用程序，其中包含指令。一个指令在调用时构建一个mapbox映射。为了工作，我最初在应用程序加载时加载了mapbox CSS和JS。这并不理想，因为它会降低初始页面加载速度，但用户甚至可能无法进入需要此脚本的视图。

所以我的问题是，当第一次调用指令时，是否有一种异步加载脚本（可能还有CSS）的方法。在第一次之后，如果在另一个视图中再次使用该指令，则它不应该再次加载脚本。这也适用于angular-loader.js吗？

所以我的示例设置到目前为止看起来像这样：

查看HTML

<ng-map></ng-map>

指令

app.directive('ngMap', ['MapService', function(MapService){
  return {
    restrict: 'E',
    templateUrl: '/partials/map.html',
    link: function($scope, element, attrs){
      MapService.build();      
    }
  }
}]);

服务

app.service('MapService', [function(){

  this.build = function(){    

    //map bounds
    var southWest = L.latLng(54.04407014753034, -0.745697021484375),
        northEast = L.latLng(53.45698455620496, -2.355194091796875),
        bounds = L.latLngBounds(southWest, northEast);

    //build map object
    L.mapbox.accessToken = conf.mapbox.token;
    map.obj = L.mapbox.map('map', conf.mapbox.id, {
      maxBounds: bounds,
      zoomControl: false,
      minZoom: 11,
      attributionControl: false
    }).setView([53.80451586014786, -1.5477633476257324], 15, {
      pan: { animate: true },
      zoom: { animate: true } 
    });

  };

}]);

map.html

<div id="map"></div>

Answer 1

您可以使用带有角度的 requirejs ，如here所述。

在Angular SPA中异步加载脚本

1 个答案: