Angular.element(document).ready的替代品

Question

我注意到与这个主题相关的大多数问题都是关于 angular 中 jQuery$(document).ready函数的替代方案，这很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的必应地图 API)。考虑到Microsoft建议ready，开发人员可以自己选择更好的选择。

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

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

为了避免竞争条件，应用程序引导可以推迟到加载所有先决条件的时刻，即窗口load事件而不是文档ready。它可能会提供相当大的延迟，但它可以保证加载应用程序所依赖的脚本，无论它们的传输是如何执行的：

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

API 提供的用于控制初始化过程的替代方法是全局回调函数：

<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(...);
};
...