1

AngularJS version 1.5+

I am facing an issue in loading my scripts every time ng-repeat is updated with the data.

The fiddle link here shows the directive which will work fine on the page load.

<div class="thing" ng-repeat="thing in things" on-finish-render>
    thing {{thing}}
 </div>

.directive('onFinishRender',['$timeout', '$parse', function ($timeout, $parse) {
  return {
      restrict: 'A',
      link: function (scope, element, attr) {
        scope.$watch('$last',function(newValue){
          if (newValue){
            $timeout(function () {
              // Loading some scripts 
              
          });
          }   
        });

      }
  }

}]);

But I want the scripts to load every time the ng-repeat has rendered the item on the search page (Means only updating the view using ajax calls).

As the ng-repeat is used on the search page the ajax call will be made and the data will be updated every time. As soon as data is updated and ng-repeat has finished the rendering I want to trigger some scripts.

I had gone through a lot of solutions like Calling a function when ng-repeat has finished

These all solutions work fine when the page is refreshed. If only the data is updated on the page and the ng-repeat is triggered then the directive won't trigger.

Looking for some solution that will trigger after the entire ng-repeat is loaded.

Thanks in advance

Check this fiddle here

John Peter
  • 11
  • 1

1 Answers1

0
Instead of checking newValue, need to check whether its the last item of repeat.

Updated the fiddle Here

Sridhar
  • 73
  • 1
  • 11
  • Yeah... I tried that. For me, the issue is this directive is just rendered on a page load. I want it to render every time the API returns the response and ng-repeat is updated without loading the page. – John Peter Jun 30 '21 at 05:45
  • In Fiddle, you have $scope.things as static one... Add ng-if for that div as ng-if="things" it will work when the things scope is defined – Sridhar Jun 30 '21 at 06:09