какъв е най-добрият начин за откриване на крайността на зареждането на html чрез ng –включване. Искам да напиша някакъв код, когато ще приключи зареждането.
Благодаря за всяка идея.
Отговори:
68 за отговор № 1Има два начина да откриете кога ng-include готово зареждане, в зависимост от вашите нужди:
1) чрез onload атрибут - за вградени изрази. Ex:
<div ng-include=""template.html"" onload="loaded = true"></div>
2) чрез събитие $includeContentLoaded че ng-include излъчва - за работа с приложения. Ex:
app.run(function($rootScope){
$rootScope.$on("$includeContentLoaded", function(event, templateName){
//...
});
});
когато приключи зареждането на съдържанието
15 за отговор № 2
можеш да използваш onload за него, както по-долу
<div ng-include=".." onload="finishLoading()"></div>
в контролер,
$scope.finishLoading = function() {
}
след зареждане на ng-include finishLoading функция за обхват ще извика.
тук е работещият Демонстратор
8 за отговор № 3
Можете да използвате този код:
$scope.$on("$includeContentLoaded", function () {
// it has loaded!
});
0 за отговор № 4
Ето пълен пример, който ще обхване всички 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>
Проблем, който имах и причината да отделя време да публикувам това е, че не успях да включа и двете ng-app и ng-controller в моята HTML маркировка
0 за отговор № 5
Ако трябва да изчакам елемента да присъства, увивам a $timeout с $includeContentLoaded:
var selector = "#foo";
$rootScope.$on("$includeContentLoaded", function(event, templateName){
$timeout(() => {
const $el = angular.element(selector);
if ($el.length) {
// Do stuff with element.
}
});
});
Времето за изчакване му дава време за зареждане правилно, особено ако ng-include съдържа директива, на която са нужни няколко милисекунди.