If you need to trigger something after a ng-repeat has finished, you're in luck. The following custom directive will do exactly that.
In my case I had a third party jQuery plugin that wouldn't work if I triggered it after a document ready. Because the document ready was fired before the ng-repeat finished loading the data.
Add the directive to the element with the ng-repeat and see magic happen.
Create directive
directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngRepeatFinished');
});
}
}
}
});
Code language: PHP (php)
Add directive to ng-repeat
<div ng-repeat="result in results" on-finish-render="ngRepeatFinished">
...
</div>
Code language: HTML, XML (xml)
Watch for the finish
$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
// Do anything
});
Code language: PHP (php)
What is equivalent this in Angular 2,. How to raise event when *ngFor finished
No idea, sorry.
Thank you
But I have a question, when I click on “ui-sref” and go to the next page and back again, the jquery not working again.
do you know why?
There’s no jQuery in my code snippet from the post.
Usually when you click the back button you might have a cached version of the page. Maybe that’s the issue.
Good luck
hi rick,
im late to this party. I use something similar in my template.
<div ng-repeat="" ... data-whatever="{{alias.process_fn($last)}} ... then in the controller this.process_fn = function(lst){ if(lst !== true) return; //if it gets through process
Code language: HTML, XML (xml)is found this because i was looking for an “angularjs” way to do this. do you know of any?
Man, this did the trick! Great thanks!
Glad it helped!
Have a good one.
Having a similar kind of issue, input type “date” is not working on an older version of Firefox, I used a function to run date but it’s not working in this case
$(window).bind('load', function() { webshims.setOptions('forms-ext', {types: 'date'}); webshims.polyfill('forms forms-ext'); });
Code language: JavaScript (javascript){{knowYourPcData.teacherName}} <!-- 42/66 -->
Code language: HTML, XML (xml)error on line $scope.$on(‘ngRepeatFinished’, function(ngRepeatFinishedEvent) {
“Uncaught ReferenceError: $scope is not defined”
Please help!
Make sure you’re passing the scope when declaring the controller
https://docs.angularjs.org/guide/controller
var myApp = angular.module('myApp',[]); myApp.controller('GreetingController', ['$scope', function($scope) { $scope.greeting = 'Hola!'; }]);
Code language: PHP (php)OMG dude!
Thank you so much!! I spent some hours until see your solution…. work’s perfectly!
You’re welcome!
what if there are multiple ng-repeat in the template and we want to notify after all of them are render
No idea ๐
How to insert this code in my code.
How does your code look like?