Exécutez une fonction après que toutes les partielles (ng-includes) ont été chargées

Comment exécuter une ligne de jQuery une fois que tous les partiels de la page sont chargés. Pas de chance avec $ (document) .ready et $ (document) .load existe-t-il d'autres façons?

app.controller('PageCtrl', function () { $(document).ready( function() { $(".left-nav").height( $('.content-area').height()); }); }); 

Tout modèle qui est chargé en angulaire, d'abord il est stocké dans $ templateCache puis il s'utilise. Et pour la deuxième fois, il est directement récupéré à partir de $ templateCache. Mieux vaut-il charger tout le modèle au début de votre application dans le bloc d'exécution de l'application

 //app will be your current app name app.run(['$templateCache','$q','$http', function($templateCache, $q, $http){ var promises = []; promises.push($http.get('partials/views/template1.html',{ cache : $templateCache })); promises.push($http.get('partials/views/template2.html',{ cache : $templateCache })); promises.push($http.get('partials/views/template3.html',{ cache : $templateCache })); $q.all(promises, function (data) { //write code here which want to load after all templates get loaded angular.element(".left-nav").css('height', angular.element('.content-area')[0].offsetHeight); //or if you have jquery file included the try below commented line //angular.element(".left-nav").css('height', angular.element('.content-area')[0].height(); }); }]); 

Dans angular $ = angular.element .

J'espère que cela vous sera utile.

Vous pouvez utiliser les contrôleurs.

HTML:

 <div data-ng-controller="includeCtrl" data-ng-include="'/partials/file.html'"></div> 

Angulaire:

 app.controller('PageCtrl', function () { $scope.includesLoaded = 0; $scope.totalIncludes = 10; //The total number of includes you have $scope.$watch(function($scope) { return $scope.includesLoaded }, function(newValue, oldValue) { if(newValue === $scope.totalIncludes) { // Your code here } } ); }); app.controller("includeCtrl", ["$timeout", function($timeout) { var init = function() { $timeout(function() { $scope.includesLoaded++; }, 0); }; init(); } ]); 

Explication: En gardant une variable avec le nombre d'éléments chargés, vous pouvez indiquer si tous étaient chargés. $scope.$watch écoute les différences dans la variable renvoyée dans la première fonction et réagit en appelant la seconde. Maintenant, $scope.$watch ne s'allume que pendant un cycle de digestion angulaire. $timeout appelle le cycle, mais il n'est peut-être pas nécessaire, je n'ai pas testé le code. Étant donné que PageCtrl doit être le contrôleur de niveau supérieur de l'application, $ scope.includesLoaded peut être disponible pour les autres contrôleurs mais, encore une fois, je ne suis pas sûr. Si cela ne fonctionne pas, utilisez $ rootScope à la place.

Cependant, la réponse de pankajparkar est bien meilleure. Juste mes 2 cents pour référence.