ng 重复完成事件

javascript jquery angularjs angularjs-ng-repeat document-ready

2022-08-30 01:12:47

我想调用一些jQuery函数，用表定位div。该表填充了。ng-repeat

当我打开它时

$(document).ready()

我没有结果。

也

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

无济于事。

有没有办法在ng重复群体完成后立即执行函数？我已经阅读了有关使用自定义的建议，但我不知道如何将其与ng-repeat和我的div一起使用...directive

答案 1

实际上，您应该使用指令，并且没有与ng-Repeat循环末尾相关的事件（因为每个元素都是单独构造的，并且有自己的事件）。但是a）使用指令可能是您所需要的，b）您可以使用一些ng-Repeat特定属性来使“在ngRepeat完成”事件。

具体来说，如果您只想设置整个表的样式/将事件添加到整个表中，则可以在包含所有 ngRepeat 元素的指令中使用。另一方面，如果要专门解决每个元素，则可以在ngRepeat中使用指令，它将在创建后作用于每个元素。

然后，可以使用、和属性来触发事件。所以对于这个HTML：$index$first$middle$last

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

您可以使用如下指令：

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

看看它在这个Plunker中的实际应用。希望它有帮助！

答案 2

如果您只想在循环结束时执行一些代码，下面是一个稍微简单的变体，不需要额外的事件处理：

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

function Ctrl($scope) {
  $scope.things = [
    'A', 'B', 'C'  
  ];
}

angular.module('myApp', [])
.directive('myPostRepeatDirective', function() {
  return function(scope, element, attrs) {
    if (scope.$last){
      // iteration is complete, do whatever post-processing
      // is necessary
      element.parent().css('border', '1px solid black');
    }
  };
});

观看现场演示。