Many solutions suggest using the scope.$last value to detect when ng-repeat finishes, such as:
angular.module('fooApp')
.directive('onLastRepeat', function () {
return function (scope, element, attrs) {
if (scope.$last) {
setTimeout(function () {
scope.$emit('onRepeatLast', element, attrs);
}, 1);
}
};
})
The drawback of this solution is that it only works when appending data at the end of the list. If you insert data in the middle, scope.$last will always be false and there is no way to know when angularjs has finished rendering the newly bound rows. Is there a solution that works regardless of where ng-repeat renders the data?
For example:
html:
<button ng-click="addToList()"></button>
<table>
<tbody>
<tr ng-repeat="foo in list" on-last-repeat><td><span>{{foo}}</span></td></tr>
</tbody>
</table>
controller code:
$scope.addToList = function() {
$scope.list.splice(1, 0, 4);
}
$scope.list = [1, 2, 3];
If you click the button in an example with the above code, scope.$last remains false in the directive intended to trigger when rendering is complete.