Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS event for when model binding or ng-repeat is complete?

We have a large model and it takes a couple seconds for ng-repeat to bind all the items in the model to the form. We would like to show a spinner while it this is happening. Is there some event that fires when binding is complete so we know when to hide the spinner?

like image 905
adam0101 Avatar asked Nov 08 '13 16:11

adam0101


People also ask

How do you call a function after Ng-repeat?

fireEvent = function(){ // This will only run after the ng-repeat has rendered its things to the DOM $timeout(function(){ $scope. $broadcast('thingsRendered'); }, 0); }; }); Note that this is only useful for functions you need to call one time after the ng-repeat renders initially.

What can I use instead of NG-repeat?

But ng-repeat is not the right thing to use when you have large datasets as it involves heavy DOM manipulations. And you should consider using ng-repeat with pagination. You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.

What does this directive do in AngularJS does ng-repeat?

AngularJS ng-repeat Directive The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.

Where is the last element in NG-repeat?

$first and $last It's common when using ng-repeat to add specific behavior to the first or last element of the loop, e.g. special styling around the edges. Instead, ng-repeat already supplies you with two ready boolean properties. $first is true for the first element, and $last is true for the last element.


1 Answers

Plunkr: http://plnkr.co/edit/GzzTW4?p=preview

Use ng-show on the spinner If you are using 1.2 use ng-if

<div ng-controller="Ctrl">
    <div ng-show="complete">Complete={{complete}}</div>
    <div class="thing" ng-repeat="thing in things" my-post-repeat-directive>
       thing {{thing}}
   </div>
</div>

In your directive use $last to determine if rendering is done and then change the variable that you have the ng-show/ngif defined on.

function Ctrl($scope) {
  $scope.complete=false;  
  $scope.doComplete = function() {
      $scope.complete = true;
  }

  $scope.things = [
    'A', 'B', 'C'
  ];
}

angular.module('myApp', [])
  .directive('myPostRepeatDirective', function() {
    return function(scope, element, attrs) {
      if (scope.$last) {
        scope.$eval('doComplete()');
      }
    };
  });
like image 79
Nathaniel Johnson Avatar answered Oct 16 '22 06:10

Nathaniel Johnson