qual è il modo migliore per rilevare la fine del caricamento html con ng –include. Voglio scrivere del codice quando sarà terminato il caricamento.
Grazie per qualsiasi idea.
risposte:
68 per risposta № 1Esistono due modi per rilevare quando ng-include caricamento finito, a seconda delle tue necessità:
1) tramite onload attributo - per le espressioni inline. Ex:
<div ng-include=""template.html"" onload="loaded = true"></div>
2) tramite un evento $includeContentLoaded quella ng-include emits - per la gestione a livello di app. Ex:
app.run(function($rootScope){
$rootScope.$on("$includeContentLoaded", function(event, templateName){
//...
});
});
quando termina il caricamento del contenuto
15 per risposta № 2
Puoi usare onload per esso come sotto
<div ng-include=".." onload="finishLoading()"></div>
nel controller,
$scope.finishLoading = function() {
}
dopo aver caricato il ng-include finishLoading la funzione scope chiamerà.
ecco il lavoro Demo Plunker
8 per risposta № 3
Puoi usare questo codice:
$scope.$on("$includeContentLoaded", function () {
// it has loaded!
});
0 per risposta № 4
Ecco un esempio completo che catturerà tutti i file ng-include eventi di caricamento emessi dall'applicazione:
<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>
Un problema che ho avuto, e il motivo per cui mi prendo il tempo per pubblicarlo, è che non sono riuscito a includere entrambi i file ng-app e ng-controller nel mio markup HTML.
0 per risposta № 5
Se devo aspettare che l'elemento sia presente, inserisco un file $timeout con $includeContentLoaded:
var selector = "#foo";
$rootScope.$on("$includeContentLoaded", function(event, templateName){
$timeout(() => {
const $el = angular.element(selector);
if ($el.length) {
// Do stuff with element.
}
});
});
Il timeout gli consente di caricare correttamente il tempo, specialmente se il file ng-include contiene una direttiva che richiede alcuni millisecondi per il rendering.