How do you execute directive code after rendering?

Question

I am trying to create a directive that runs after nested ng-repeat finished rendering. Here is what I tried (violin) :

HTML:

 <div ng-app="MyApp" ng-controller="MyCtrl"> <ul my-directive> <li ng-repeat="animal in animals">{{animal}}</li> </ul> </div> 

And JavaScript:

 angular.module("MyApp", []) .directive("myDirective", function () { return function(scope, element, attrs) { alert(element.find("li").length); // 0 }; }); function MyCtrl($scope) { $scope.animals = ["Dog", "Cat", "Elephant"]; } 

The bind function in my custom directive is executed before all <li> elements have been displayed (and 0 warned). How to run code after ng-repeat rendering is completed?

Answer 1

You can move the directive inside ng-repeat, http://jsfiddle.net/ZTMex/3/

 <div ng-app="MyApp" ng-controller="MyCtrl"> <ul> <li ng-repeat="animal in animals" my-directive>{{animal}}</li> </ul> </div> 

Or have a look at https://stackoverflow.com/a/22890/282 which is related to your question.