替代 angular.element(document).ready

Question

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

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

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

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中才能完成初始化，这正是原始代码和微软示例所显示的，看起来不太好。

为了避免竞争条件，应用程序引导可以推迟到加载所有先决条件的那一刻，即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);
  });
});

bingMapsLoaderpromise 可以被链接以保证 API 已初始化、放入路由器解析器等。

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

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

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