<!DOCTYPE html>
<html>
<head>
<title>Angularjs: Calling a function when ng-repeat has finished</title>
<style type="text/css">
div.log {
border: 2px solid gray;
color: black;
padding: 10px;
font-size: 20px;
font-family: monospace;
}
div.log div {
padding: 10px;
}
</style>
<script src="http://code.angularjs.org/1.2.12/angular.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.items = [];
$scope.items.push({"name": "Pritom"});
$scope.items.push({"name": "Kumar"});
var log = $(".log");
$scope.log = function(e) {
log.prepend("<div>" + e + "</div>");
}
})
app.directive("myCustomValidation", function($timeout) {
return {
restrict: "A",
require: "ngModel",
link: function(scope, elem, attrs, ctrl) {
/**
* If you dont use $timeout then nothing found.
* You can try yourself.
*/
$timeout(function () {
scope.$apply(function () {
scope.log(elem.val())
})
})
}
}
})
</script>
</head>
<body>
<div data-ng-app="myApp" data-ng-controller="MyController">
<div>
<div ng-form="myForm" data-ng-repeat="item in items">
<div style="border:1px solid blue;padding:10px;">
<input type="text" name="name" ng-model="item.name" ng-maxlength="10"
my-custom-validation required style="width:100%;"/>
</div>
</div>
<div class="log"></div>
</div>
</div>
</body>
</html>
Result using $timeout:
Result without using $timeout:
