完成加载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-app和ng-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包含一个需要几毫秒渲染的指令。
