Question

我注意到与此主题相关的大多数问题都是关于角度的jQuery $(document).ready函数的替代方法，angular.element($document).ready但是我想要一个可测试/最佳实践的替代方案。

我目前正在注入Bing Maps，它需要在我的控制器中的代码执行之前加载。

目前我将控制器代码包装在准备好的文档中：

angular.element($document).ready(function() {
    self.map = new Microsoft.Maps.Map(document.getElementById('map'), {
        credentials: $scope.credentials,
        enableClickableLogo: false,
        enableSearchLogo: false,
        showDashboard: false,
        disableBirdseye: true,
        allowInfoboxOverflow: true,
        liteMode: true,
        minZoom: 2
    });

    $scope.$watch('zoom', function (zoom) {
        self.map.setView({animate: true, zoom: zoom});
    });

    if ($scope.onMapReady) {
        $scope.onMapReady({ map: self.map });
    }

});

哪个有效，但我无法测试，所以我认为这是不正确的用法。我尝试在$scope.loaded = true;的指令中设置一个变量，因为我读到如果指令链接函数被命中，则必须加载DOM。然后我尝试用以下文件替换文档：

$scope.$watch('loaded', function () {
    self.map = new Microsoft.Maps.Map(document.getElementById('map'), {
       credentials: $scope.credentials,
       enableClickableLogo: false,
       enableSearchLogo: false,
       showDashboard: false,
       disableBirdseye: true,
       allowInfoboxOverflow: true,
       liteMode: true,
       minZoom: 2
    });

    if ($scope.onMapReady) {
        $scope.onMapReady({ map: self.map });
    }
});

$scope.$watch('zoom', function (zoom) {
    self.map.setView({animate: true, zoom: zoom});
});

'加载'手表按预期工作，但自然缩放会在加载时被点击，就在设置地图之前。我觉得我可以将文档更改为$timeout函数，但这似乎是一种解决方法而不是正确的解决方案，是否有angular.element($document).ready的最佳实践替代方法以相同的方式工作但允许我成功测试了它的内容？

Answer 1

通常Angular应用程序已经在文档ready上引导。这是使用ng-app自动引导的默认行为，并且angular.bootstrap上的ready手动引导也应该执行。

该问题仅针对当前案例（Microsoft的Bing Maps API）。考虑到ready is suggested by Microsoft，开发人员可以使用更好的替代方案。

<script src="https://www.bing.com/api/maps/mapcontrol"></script>

是同步加载的，但它会触发许多依赖项，以便在触发初始文档ready时加载但尚未加载。实际上，它需要ready在另一个ready内才能完成初始化，这正是原始代码和Microsoft示例所显示的内容，并且看起来并不是很好。

为了避免竞争条件，应用程序引导程序可以推迟到加载所有先决条件的时刻，即window load event instead of document ready。它可能会提供相当大的延迟，但它可以保证应用程序所依赖的脚本被加载，无论它们的传输方式如何：

angular.element(window).on('load', () => {
  angular.bootstrap(document.body, ['app']
});

API为控制初始化过程提供的替代方法是global callback function：

<script src="https://www.bing.com/api/maps/mapcontrol?callback=globalCallbackName"></script>

可以使用服务打包回调，而不是依赖<script>：

angular.module('bingMaps', [])
.factory('bingMapsLoader', ($q, $window, $document, $timeout) => {
  var script = document.createElement('script');
  script.src = 'https://www.bing.com/api/maps/mapcontrol?callback=bingMapsCallback';
  script.async = true;

  $document.find('body').append(script);

  return $q((resolve, reject) => {
    $window.bingMapsCallback = resolve;
    $timeout(reject, 30000);
  });
});

bingMapsLoader承诺可以链接以保证API已初始化，放入路由器解析器等。

此外，在编译指令之前执行控制器构造函数。无论是否使用第三方API，将所有特定于DOM的代码移动到Angular 1.4及更低版本中的前/后链接功能以及Angular 1.5中的控制器$onInit或$postLink挂钩是正确的。更高：

app.controller('FooController', function (bingMapsLoader) {
  this.$postLink = () => {
    bingMapsLoader.then(() => this.mapsInit());
  };

  this.mapsInit = () => {
    Microsoft.Maps.Map(...);
  };
  ...

angular.element（document）.ready

1 个答案: