trigger when ngRepeat is done

Question

In a directive I need to have the width of an element, however this element is created in a ng-repeat. So when the code inside my link function runs, ngRepeat is not yet executed. I tried to delay things using $timeout but that didn't help

JS:

link: function (scope, element) {
    $timeout(function () {
        var width = $(element.find('li')).width(); // the li elements do not exist
    });
}

HTML:

<ol>
    <li ng-repeat="item in items">
        <my-item>.....</my-item>
    </li>
</ol>

I cannot use the <ol> element, because the <my-item> has styles like margins/paddings.

Any suggestions ?

check this out, [link1](http://stackoverflow.com/questions/13471129/angularjs-ng-repeat-finish-event) and [link2](http://stackoverflow.com/questions/15207788/calling-a-function-when-ng-repeat-has-finished) — Yuliam Chandra, Jul 10 '14 at 10:00

score 3 · Answer 1 · edited May 23 '17 at 10:32

3

From ng-repeat finish event

<ol>
    <li ng-repeat="item in items" on-complete>
        <my-item>.....</my-item>
    </li>
</ol>

-

.directive('onComplete', function() {
  return function(scope, element, attrs) {
    angular.element(element).css('color','blue');
    if (scope.$last){
      window.alert("im the last!");
    }
  };
})

http://plnkr.co/edit/or5mys?p=preview

edited May 23 '17 at 10:32

Community

1
1

answered Jul 10 '14 at 11:10

Bolza

1,904
2
17
42

score 1 · Answer 2 · edited May 23 '17 at 10:32

1

You could use the scope.$last to generate an event when the last item is done or just run the code you need in there.

You might also want to consider your design. Could there be any CSS solution for your problem? If not go ahead.

edited May 23 '17 at 10:32

Community

1
1

answered Jul 10 '14 at 10:10

Fabio Milheiro

8,100
17
57
96

trigger when ngRepeat is done

2 Answers2