What I am trying to implement is basically a \"on ng repeat finished rendering\" handler. I am able to detect when it is done but I can\'t figure out how to trigger a functi
The answers that have been given so far will only work the first time that the ng-repeat
gets rendered, but if you have a dynamic ng-repeat
, meaning that you are going to be adding/deleting/filtering items, and you need to be notified every time that the ng-repeat
gets rendered, those solutions won't work for you.
So, if you need to be notified EVERY TIME that the ng-repeat
gets re-rendered and not just the first time, I've found a way to do that, it's quite 'hacky', but it will work fine if you know what you are doing. Use this $filter
in your ng-repeat
before you use any other $filter
:
.filter('ngRepeatFinish', function($timeout){
return function(data){
var me = this;
var flagProperty = '__finishedRendering__';
if(!data[flagProperty]){
Object.defineProperty(
data,
flagProperty,
{enumerable:false, configurable:true, writable: false, value:{}});
$timeout(function(){
delete data[flagProperty];
me.$emit('ngRepeatFinished');
},0,false);
}
return data;
};
})
This will $emit
an event called ngRepeatFinished
every time that the ng-repeat
gets rendered.
-
The ngRepeatFinish
filter needs to be applied directly to an Array
or an Object
defined in your $scope
, you can apply other filters after.
-
Do not apply other filters first and then apply the ngRepeatFinish
filter.
If you want to apply certain css styles into the DOM after the list has finished rendering, because you need to have into account the new dimensions of the DOM elements that have been re-rendered by the ng-repeat
. (BTW: those kind of operations should be done inside a directive)
ngRepeatFinished
event:Do not perform a $scope.$apply
in that function or you will put Angular in an endless loop that Angular won't be able to detect.
Do not use it for making changes in the $scope
properties, because those changes won't be reflected in your view until the next $digest
loop, and since you can't perform an $scope.$apply
they won't be of any use.
No, they are not, this is a hack, if you don't like it don't use it. If you know a better way to accomplish the same thing please let me know it.
This is a hack, and using it in the wrong way is dangerous, use it only for applying styles after the
ng-repeat
has finished rendering and you shouldn't have any issues.