angularjs - ngswitch - Carga final de ng-include en js angulares
ngswitch angular 4 (5)
cuál es la mejor manera de detectar el final de la carga html mediante ng -include. Quiero escribir un código cuando se termine de cargar.
Gracias por cualquier idea
puedes usar onload para ello como se muestra a continuación
<div ng-include=".." onload="finishLoading()"></div>
en el controlador,
$scope.finishLoading = function() {
}
después de cargar la función de alcance ng-include finishLoading llamará.
aquí está el Demo Plunker trabajando
Puedes usar este código:
$scope.$on(''$includeContentLoaded'', function () {
// it has loaded!
});
Hay dos formas de detectar cuándo ng-include finalizar la carga, según su necesidad:
1) a través del atributo onload - para expresiones en línea. Ex:
<div ng-include="''template.html''" onload="loaded = true"></div>
2) a través de un evento $includeContentLoaded que ng-include emite - para el manejo en toda la aplicación. Ex:
app.run(function($rootScope){
$rootScope.$on("$includeContentLoaded", function(event, templateName){
//...
});
});
cuando termine de cargar el contenido
Aquí hay un ejemplo completo que capturará todos los eventos ng-include load emitidos por la aplicación:
<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 que tuve, y la razón por la que me tomé el tiempo para publicar esto, es que no pude incluir la ng-app y ng-controller en mi marcado HTML.
Si tengo que esperar a que el elemento esté presente, $includeContentLoaded $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.
}
});
});
El tiempo de espera le da tiempo de carga correctamente, especialmente si ng-include contiene una directiva que tarda unos milisegundos en procesarse.