Is There an Event Triggered When ng-Repeat Finishes Populating Elements?

ng-Repeat Population Completion Event

Problem

Manipulating elements populated by ng-repeat using jQuery selectors within $(document).ready() or $scope.$on('$viewContentLoaded', myFunc) proves futile. Is there a dedicated event that triggers upon ng-repeat's completion?

Answer

While there is no specific event signaling ng-repeat's termination, utilizing directives and ng-repeat-specific properties provides a viable solution.

Directives

If your goal is to style or attach event handlers to the entire table, you can employ a directive that encapsulates all ng-repeat elements. Conversely, for addressing specific elements, use a directive within ng-repeat, which will execute for each created element.

Ng-Repeat Properties

The $index, $first, $middle, and $last properties enable triggering events. For instance, you can utilize the $last property to display an alert when the last element is created.

Example

Consider the following HTML:

<div ng-controller="Ctrl" my-main-directive>
  <div ng-repeat="thing in things" my-repeat-directive>
    thing {{thing}}
  </div>
</div>

The accompanying directives could resemble:

angular.module('myApp', [])
.directive('myRepeatDirective', function() {
  return function(scope, element, attrs) {
    angular.element(element).css('color','blue');
    if (scope.$last){
      window.alert("im the last!");
    }
  };
})
.directive('myMainDirective', function() {
  return function(scope, element, attrs) {
    angular.element(element).css('border','5px solid red');
  };
});

Sample this solution in action through this Plunker.

The above is the detailed content of Is There an Event Triggered When ng-Repeat Finishes Populating Elements?. For more information, please follow other related articles on the PHP Chinese website!