javascript - ng-repeat完成事件(ng-repeat finish event)

Question

I want to call some jQuery function targeting div with table.(我想调用一些jQuery函数以div为目标。)

That table is populated with ng-repeat .(该表填充了ng-repeat 。)

When I call it on(我打电话的时候)

$(document).ready()

I have no result.(我没有结果。)

Also(也)

$scope.$on('$viewContentLoaded', myFunc);

doesn't help.(没有帮助。)

Is there any way to execute function right after ng-repeat population completes?(在ng-repeat群体完成后，有没有办法正确执行功能？)

I've read an advice about using custom directive , but I have no clue how to use it with ng-repeat and my div...(我已经阅读了有关使用自定义directive的建议，但我不知道如何将它与ng-repeat和我的div一起使用...)   ask by ChruS translate from so

Answer 1

Indeed, you should use directives, and there is no event tied to the end of a ng-Repeat loop (as each element is constructed individually, and has it's own event).(实际上，你应该使用指令，并且没有事件与ng-Repeat循环的结束相关联（因为每个元素是单独构造的，并且具有它自己的事件）。)

But a) using directives might be all you need and b) there are a few ng-Repeat specific properties you can use to make your "on ngRepeat finished" event.(但是a）使用指令可能就是你所需要的全部b）有一些ng-Repeat特定属性可用于制作你的“on ngRepeat finished”事件。)

Specifically, if all you want is to style/add events to the whole of the table, you can do so using in a directive that encompasses all the ngRepeat elements.(具体来说，如果您只想在整个表中设置样式/添加事件，则可以在包含所有ngRepeat元素的指令中使用。)

On the other hand, if you want to address each element specifically, you can use a directive within the ngRepeat, and it will act on each element, after it is created.(另一方面，如果要专门处理每个元素，可以在ngRepeat中使用指令，它将在创建后对每个元素起作用。)

Then, there are the $index , $first , $middle and $last properties you can use to trigger events.(然后，您可以使用$index ， $first ， $middle和$last属性来触发事件。)

So for this HTML:(对于这个HTML：)

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

You can use directives like so:(您可以使用如下指令：)

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');
  };
});

See it in action in this Plunker .(在此Plunker中查看它的实际应用 。)

Hope it helps!(希望能帮助到你！)