完成加载ng-include在angular度js中

用ng -include检测html加载的最佳方法是什么? 我想写一些代码,当它将完成加载。

感谢您的任何想法。

有两种方法可以检测ng-include完成加载,具体取决于您的需要:

1)通过onload属性 – 内联expression式。 例如:

 <div ng-include="'template.html'" onload="loaded = true"></div> 

2)通过事件$includeContentLoaded ng-include emits – 用于应用程序范围的处理。 例如:

 app.run(function($rootScope){ $rootScope.$on("$includeContentLoaded", function(event, templateName){ //... }); }); 

当它完成加载内容

你可以像下面一样使用onload

 <div ng-include=".." onload="finishLoading()"></div> 

在控制器中,

 $scope.finishLoading = function() { } 

加载完ng-include finishLoading后,加载范围函数会调用。

这里是工作的Demo Plunker

你可以使用这个代码:

 $scope.$on('$includeContentLoaded', function () { // it has loaded! }); 

下面是一个完整的例子,它将捕获应用程序发出的所有ng-include载入事件:

 <html ng-app="myApp"> <head> <script src="angular.min.js"></script> </head> <body ng-controller="myController"> <div ng-include="'snippet.html'"></div> <script> var myApp = angular.module("myApp",[]); myApp.controller('myController', function($scope) { $scope.$on('$includeContentLoaded', function(event, target){ console.log(event); //this $includeContentLoaded event object console.log(target); //path to the included resource, 'snippet.html' in this case }); }); </script> </body> </html> 

我有一个问题,我花时间发布这个的原因是,我没有在我的HTML标记中同时包含ng-appng-controller

如果我不得不等待元素出现,我用$includeContentLoaded包装一个$timeout

 var selector = '#foo'; $rootScope.$on('$includeContentLoaded', function(event, templateName){ $timeout(() => { const $el = angular.element(selector); if ($el.length) { // Do stuff with element. } }); }); 

超时会给它的时间加载正常,特别是如果ng-include包含一个需要几毫秒渲染的指令。