jaki jest najlepszy sposób na wykrycie zakończenia ładowania html przez ng –include. Chcę napisać jakiś kod, kiedy zakończy się ładowanie.
Dzięki za każdy pomysł.
Odpowiedzi:
68 za odpowiedź nr 1Istnieją dwa sposoby wykrycia, kiedy ng-include zakończony załadunek, w zależności od potrzeb:
1) za pośrednictwem onload atrybut - dla wyrażeń wbudowanych. Dawny:
<div ng-include=""template.html"" onload="loaded = true"></div>
2) poprzez wydarzenie $includeContentLoaded który ng-include emituje - do obsługi całej aplikacji. Dawny:
app.run(function($rootScope){
$rootScope.$on("$includeContentLoaded", function(event, templateName){
//...
});
});
kiedy zakończy się ładowanie treści
15 dla odpowiedzi nr 2
możesz użyć onload za to jak poniżej
<div ng-include=".." onload="finishLoading()"></div>
w kontrolerze,
$scope.finishLoading = function() {
}
po załadowaniu ng-include finishLoading wywoła funkcję zakresu.
tutaj działa Demo Plunker
8 dla odpowiedzi nr 3
Możesz użyć tego kodu:
$scope.$on("$includeContentLoaded", function () {
// it has loaded!
});
0 dla odpowiedzi nr 4
Oto kompletny przykład, który obejmie wszystkie pliki ng-include zdarzenia ładowania emitowane przez aplikację:
<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>
Problem, który miałem i powodem, dla którego poświęcam czas, aby to opublikować, jest to, że nie udało mi się uwzględnić obu plików ng-app i ng-controller w moim znaczniku HTML.
0 dla odpowiedzi № 5
Jeśli muszę czekać na pojawienie się elementu, zawijam plik $timeout z $includeContentLoaded:
var selector = "#foo";
$rootScope.$on("$includeContentLoaded", function(event, templateName){
$timeout(() => {
const $el = angular.element(selector);
if ($el.length) {
// Do stuff with element.
}
});
});
Limit czasu zapewnia prawidłowe ładowanie czasu, szczególnie jeśli ng-include zawiera dyrektywę, której renderowanie zajmuje kilka milisekund.