$document.ready and ng-model

Question

I do have a directive from which i'm trying to apply a bootstrap collapse function once the document is ready.

To do so I have to browse each object of a collection.

My directive looks something like this :

'use strict';

angular.module('app').directive("adScheduleTimeline",function($document) {
    return {
        restrict: 'E',
        scope:{
            ngModel: '='
        },
        templateUrl: '/partials/schedule/ad-schedule-timeline',
        link: function (scope, el, attrs) {
            scope.panelBaseId = attrs.collapsePanelBodyId;
            scope.panelId = attrs.collapsePanelId;

            $document.ready(function(){
                console.log(scope.ngModel)
                angular.forEach(scope.ngModel, function(value, key){
                    if (value.collapsed)
                    {
                        $("#" + scope.panelBaseId + "-" + key).collapse('show');
                    }
                });
            });
        }
    };
});

Once I load the page, the scope.ngModelis undefined and therefore the collapse function is not working. Is there any better way to implement a similar function on page load.

For info, the collapse function is coming from Bootstrap2.x.x. i'm not using angular-ui-bootstrap.

Don't use document.ready angular will bootstrap itself (Unless you do it manually) — Endless, Aug 07 '14 at 12:38

runTarm · Accepted Answer · 2014-08-07T14:39:14.187

3

You could use scope.$watch() to wait until the value of scope.ngModel is populated.

link: function (scope, el, attrs) {
    scope.panelBaseId = attrs.collapsePanelBodyId;
    scope.panelId = attrs.collapsePanelId;

    scope.$watch('ngModel', function (model) {
        if (!model) { return; }

        angular.forEach(model, function(value, key) {
            if (value.collapsed) {
                $("#" + scope.panelBaseId + "-" + key).collapse('show');
            }
        });
    });
}

And if you would like to do it only once, i.e. no need to call collapse() again when the scope.ngModel has been changed later. You could unwatch it like this:

link: function (scope, el, attrs) {
    scope.panelBaseId = attrs.collapsePanelBodyId;
    scope.panelId = attrs.collapsePanelId;

    var unwatch = scope.$watch('ngModel', function (model) {
        if (!model) { return; }

        unwatch();

        angular.forEach(model, function(value, key) {
            if (value.collapsed) {
                $("#" + scope.panelBaseId + "-" + key).collapse('show');
            }
        });
    });
}

BTW, the $document.ready() is useless here, the angular will wait the document to be ready before start bootstraping anyway.

Hope this helps.

edited Aug 07 '14 at 14:39

answered Aug 07 '14 at 13:24

runTarm

11,537
1
37
37

thanks @runTarm, this is the best proposed solution and for sure the most elegant. Your comment about `$document.ready()` absolutely true. Angular waits for DOMContentLoaded. It means that any controller code will run after the DOM is ready and the controller has been loaded so $document.ready() is already fired before angular – Michael Aug 07 '14 at 13:37
2

I would recommend to use `$timeout` in this context, the `$watch()` handler will always be invoked during model changes throughout the lifecycle for all ngModels. If you don't want to use `$timeout`, then De-register the watcher. – ryeballar Aug 07 '14 at 14:34
Agree with the idea of deregister the watcher, will update the answer, thanks! – runTarm Aug 07 '14 at 14:36
But I still think, `$timeout` is better in this context though. – ryeballar Aug 07 '14 at 14:37
2

Yes, it will work if the `ngModel` is set synchronusly. I mean if the data of `ngModel` come from an ajax request, the `$timeout` is not a solution. Just to be safe :) – runTarm Aug 07 '14 at 14:42
Hmm you're right! Well I assumed that the OP didn't say that ngModel is set via async, so yeah, your solution works for both cases. – ryeballar Aug 07 '14 at 14:49
My problem has been solved by surrounding the unwatch with `$timeout`with a null delay, this is explained here : http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful#comment14183689_779785 – Michael Aug 07 '14 at 14:53

score 0 · Answer 2 · answered Aug 07 '14 at 12:42

Not tested...

'use strict';

angular.module('app').directive("adScheduleTimeline",function($document) {
    return {
        restrict: 'E',
        require: '?ngModel',
        templateUrl: '/partials/schedule/ad-schedule-timeline',
        link: function (scope, el, attrs, ctrl) {
            scope.panelBaseId = attrs.collapsePanelBodyId;
            scope.panelId = attrs.collapsePanelId;

            if(ctrl.$modelValue)
            {
                angular.forEach(ctrl.$modelValue, function(value, key){
                    if (value.collapsed)
                    {
                            $("#" + scope.panelBaseId + "-" + key).collapse('show');
                    }
                });
            }
        }
    };
})

I doubt myself too. But i would go with a completely different way of building this anyway — Endless, Aug 07 '14 at 12:48

score 0 · Answer 3 · answered Aug 07 '14 at 12:46

0

Try hooking into the $viewContentLoaded event:

link: function (scope, el, attrs) {
    ...

    scope.$on('$viewContentLoaded', function() {
        console.log(scope.ngModel);
        angular.forEach(scope.ngModel, function(value, key) {
            if (value.collapsed) {
                $("#" + scope.panelBaseId + "-" + key).collapse('show');
            }
        });
    };
}

answered Aug 07 '14 at 12:46

Dennis Traub

50,557
7
93
108

@dennis-traud I tried your proposal but $viewContentLoaded is never fired from within the directive. – Michael Aug 07 '14 at 13:43

$document.ready and ng-model

3 Answers3