Run a function after all partials (ng-includes) loaded

Question

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());
  });
});

try angular.element(document).ready(function () { $(".left-nav").height( $('.content-area').height()); }); — Pankaj Parkar, Jan 05 '15 at 18:27
@Joao I need to support little old browsers so I cannot use flexbox but for now I am using flexbox itself :) I like to have other solution for this. thanks for your help. — Syed, Jan 05 '15 at 19:00
Possible duplicate of [AngularJS: How to make angular load script inside ng-include?](http://stackoverflow.com/questions/12197880/angularjs-how-to-make-angular-load-script-inside-ng-include) — LKallipo, Nov 02 '16 at 10:56

Pankaj Parkar · Answer 1 · 2015-01-05T19:40:15.267

2

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.

edited Jan 05 '15 at 19:40

answered Jan 05 '15 at 19:00

Pankaj Parkar

134,766
23
234
299

1

Good answer, but I wouldn't put jQuery in app.run. The "Angular Way" is to put any display logic in directives. You could broadcast an event here which is received by a directive which sets the height. – Joao Jan 05 '15 at 19:14
@Joao answer is updated..for small DOM change i don't think so we can include a directive. – Pankaj Parkar Jan 05 '15 at 19:25
For your answer I have up vote but can't mark it as answer because I have 2 folders "partials" and "Views". I am calling all partials with ng-include. The view load first and included partials load later, so there is where the problem lies. So, this code kinda not work for me. Thanks a lot for your help @pankajparkar – Syed Jan 05 '15 at 20:00
did you try to add it in your controller instead of app.run? – Pankaj Parkar Jan 06 '15 at 05:56

score 0 · Answer 2 · answered Jan 05 '15 at 19:08

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.

why are you increamenting includesLoaded in $timeout function? — Pankaj Parkar, Jan 06 '15 at 05:25
I didn't test the code, so I'm not sure if the incrementation is going to run inside a $digest cycle. $timeout calls the $digest cycle implicitly, that's why I used it. It quite possibly is not needed. — Douglas Henrique, Jan 06 '15 at 15:54

Run a function after all partials (ng-includes) loaded

2 Answers2

Linked