CODEWITHSUNDEEP
javascriptjqueryangularjsdom
Nupur
Nupur

Reputation: 163

Callback function after dom is loaded in angular

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

Upvotes: 1

Views: 4177

Answers (2)

Tushar
Tushar

Reputation: 87233

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

Upvotes: 2

Gaurav
Gaurav

Reputation: 3749

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

Upvotes: 0

Related Questions