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

Answer 1

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

Answer 2

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