Callback function after dom is loaded in angular

Question

I have a code snippet in HTML where I am doing ng-repeat to get a list of boxes. Once dom is ready I need to call a jquery plugin for resizing. But before dom gets ready,plugin gets called and nothing is rendered.

Can anyone please help me,as how can I be notified that dom is updated or when dom is ready so that I can call my plugin.

Thanks

Can you post some code ? It's better to put your script tags at the end of `body` tag — Vigneswaran Marimuthu, Apr 21 '15 at 04:41

score 2 · Answer 1 · edited May 23 '17 at 10:29

2

We can use the angular.element(document).ready() method to attach callbacks for when the document is ready. We can simply attach the callback in the controller like so

function MyCtrl($scope) {
    angular.element(document).ready(function () {
        console.log('Hello World');
    });
}

Demo

Taken From: https://stackoverflow.com/a/18646795/2025923

edited May 23 '17 at 10:29

Community

1
1

answered Apr 21 '15 at 04:42

Tushar

85,780
21
159
179

Be aware that this only works in the page load. If you are using ng-view / ui-view this approach will not be the better solution. It seems that the question look for a dom ready after ng-repeat finish teh rendering – Deividi Cavarzan Apr 21 '15 at 04:52

score 0 · Answer 2 · answered Apr 21 '15 at 05:05

It looks like you are looking for a way to be notified when ng-repeat is done with rendering the content. You can create a directive like this.

app.directive('ngRepeatEnd', function($rootScope){
                return {
                    restrict:'A',                   
                    link:function(scope, element, attrs){
                        if(scope.$last){                                
                            $rootScope.$broadcast('ArrayUpdated');                      
                        }
                    }
                };
            });

Since the directive operates in the same scope as ng-repeat, you can access the $last variable provided by ng-repeat. $last would be true for the last repeated value. So, with this, we can broadcast an event and catch it in the controller.

app.controller('DefaultController', function($scope){
      $scope.$on('ArrayUpdated', function(){
            //Your callback content here.
    });
});

Yes I want to be notified when ng-repeat is done rendering.From where should I call directive ngRepeatEnd ?Can you please provide any example fiddle — Nupur, Apr 21 '15 at 05:52

Callback function after dom is loaded in angular

2 Answers2