1

I have an app specified with ng-app="blahApp". Inside the app there are ten or so ng-includes that each load a template via HTTP based on the URL, e.g. ng-include="'/url/to/template.html'".

How do I execute a single function after the app has loaded all partials into the DOM?

The reason I ask is because each template the gets loaded has some stuff that would otherwise (when not using Angular) rely on a single call to a jQuery plugin that initiates all the items on the page on $(document).ready();. But now, document.ready doesn't work because the partials aren't loaded until some time after document.ready.

<!-- HTML: -->

        <div id="tabs" ng-app="reportTabsApp" ng-controller="RootController">

            <!-- Load a bunch of partials here with ng-include -->

        </div>



<!-- my Angular code: -->

<script>
    var reportTabsApp = angular.module("reportTabsApp", []);

    reportTabsApp.controller('RootController', function($scope, $rootScope) {
        console.log($scope); // this works
        console.log($rootScope); // this works
        $scope.$on("$viewContentLoaded", function() {
            console.log(" -- VIEW CONTENT LOADED!!"); // This never happens.
        });
        $rootScope.$on("$viewContentLoaded", function() {
            console.log(" -- VIEW CONTENT LOADED!!"); // This also never happens.
        });
    });
</script>
trusktr
  • 44,284
  • 53
  • 191
  • 263
  • you can arbitrary **decide** when all partials are loaded, utilizing `$includeContentLoaded` for that, but from your description, i suspect your approach is lacking - what you currently do on "dom ready" can be done in a different fashion (e.g. inside directives). [did you read this one?](http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background) – Eliran Malka Mar 30 '14 at 22:44
  • another thing -- did you try listening to `$viewContentLoaded`? that should do it. – Eliran Malka Mar 30 '14 at 22:46
  • @EliranMalka Yep, I tried $viewContentLoaded with no luck. See my updated code example. Let me see what happens with $includeContentLoaded. – trusktr Mar 30 '14 at 22:55
  • Aha!! $includeContentLoaded works!! I suspect I still need to learn directives rather than just running jQuery in there though. – trusktr Mar 30 '14 at 22:57
  • Oh wait... `$includeContentLoaded` gets fired 10 times, one per each ng-include! I just need one to fire after all are loaded. – trusktr Mar 30 '14 at 23:00
  • yes, it is fired once for each include - that's why i wrote you can **arbitrarily decide** when they've all been loaded. i suggest you get rid of that jQuery code and start from scratch. have a read on the post i suggested, it's quite enlightening. you can also read about writing custom directives at the angular docs for `$compile`. – Eliran Malka Mar 30 '14 at 23:06
  • @EliranMalka What the jQueryUI code is doing is it makes a date picker dropdown calendar when you click on a text input. The value of the text input doesn't need to modify anything in the $scope. – trusktr Mar 30 '14 at 23:19
  • Another problem I'm having is that AngularJS code seems like it needs to be created in the head, and I'm used to putting all scripts in the footer. Thanks for the link. Checking it out now! – trusktr Mar 30 '14 at 23:20
  • the `$viewContentLoaded` never fires because in order to invoke it you must include an `ng-view` element in your app -- i was assuming you did. i suggest you go back to square one to get a better grip of angular. [start with this tutorial](http://docs.angularjs.org/tutorial/step_00). – Eliran Malka Mar 31 '14 at 08:25
  • 1
    Thanks Eliran! The thing is this is my first time using AngularJS... to migrate a whole jQuery app. xD But yeah, that tutorial is very helpful. :) – trusktr Apr 01 '14 at 04:48

1 Answers1

1

The answer, as Eliran suggested in the comments, is to arbitrarily decide when all partials are done loading. I came up with this:

<script>
    var yourApp = angular.module("yourApp", []);

    yourApp.controller('YourController', function($scope) {
        $scope.includeCounter = 0;

        $scope.partials = [
            '/path/to/template1.html',
            '/path/to/template2.html',
            '/path/to/template3.html'
            // etc...
        ];

        // in your html you use ng-repeat to repeat an element, and on each of
        // those elements you have ng-include to load the above partials.

        $scope.$on("$includeContentLoaded", function() {
            $scope.includeCounter++;
            if ($scope.includeCounter == $scope.partials.length) { // if all partials loaded.

                 console.log(" -- ALL PARTIALS LOADED!!");
                 // do what you need now that all partials are loaded.
            }
        });
    });
</script>
trusktr
  • 44,284
  • 53
  • 191
  • 263