I am currently working on creating a directive that executes after a nested ng-repeat has finished rendering. Here is my approach in this(fiddle):
This is the HTML code:
<div ng-app="MyApp" ng-controller="MyCtrl">
<ul my-directive>
<li ng-repeat="animal in animals">{{animal}}</li>
</ul>
</div>
And here is the JavaScript code:
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 custom directive's linking function is triggering before all the <li> elements have been rendered (resulting in an alert of 0). How can I make sure my code runs after the completion of the ng-repeat rendering?