问题
How can run a line of jQuery once all the partials in the page loaded. No luck with $(document).ready and $(document).load is there any other ways?
app.controller('PageCtrl', function () {
$(document).ready( function() {
$(".left-nav").height( $('.content-area').height());
});
});
回答1:
Any template which gets loaded in angular, first it get stored in $templateCache then it gets used. And for second time it directly gets fetched from $templateCache. Better you load all the template at the starting of your app inside app run block
//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();
});
}]);
In angular $ = angular.element.
Hope this would be helpful to you.
回答2:
You can use controllers.
HTML:
<div data-ng-controller="includeCtrl" data-ng-include="'/partials/file.html'"></div>
Angular:
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();
}
]);
Explanation:
By keeping a variable with the number of includes loaded you can tell if all of them were loaded.
$scope.$watch listens to differences in the variable returned in the first function and reacts to it by calling the second.
Now, $scope.$watch will only fire during an Angular digest cycle. $timeout calls the cycle, but it might not be needed, I didn't test the code.
Since PageCtrl must be the top-level controller of the application, $scope.includesLoaded may be available for the other controllers but, again, I'm not sure. If it does not work, use $rootScope instead.
pankajparkar's answer is way better, though. Just my 2 cents for reference.
来源：https://stackoverflow.com/questions/27785564/run-a-function-after-all-partials-ng-includes-loaded