Question

我有一个代码，它进行ajax调用并获取一个json对象，从中呈现ng-repeat。一旦这一切都被渲染，我想调用一个函数来绑定渲染元素上的一些事件。

<div ng-repeat="list in arr | filter: {DegreeName: 'xyz'}">
    <div class="saveprogram">save program</div>
</div>
<div ng-repeat="list in arr | filter: {DegreeName: 'abc'}">
    <div class="saveprogram">save program</div>
</div>
<div ng-repeat="list in arr | filter: {DegreeName: 'test'}">
    <div class="saveprogram">save program</div>
</div>

一旦渲染了所有上述ng-repeat，我想在其上附加一些事件。我试过了

$window.onload = function(){
    //someevent
    $(".saveprogram")
}

这有效，但它在IE中有一些问题。有人可以帮我一些指令，一旦所有ng-repeat被渲染就会运行

注意：我经历了很多帖子并尝试过，但这并没有帮助。我会使用ng-click但这是一个现有的代码而且非常复杂。它里面有很多东西。所以我不想再次重写每一个东西。并且每次在ng-click上调用函数我都没有发现它很好。我只想运行一次函数，它执行所有绑定

Answer 1

<强>指令

您只需在控制器之前插入该代码即可使用

var module = angular.module('testApp', [])
    .directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit(attr.onFinishRender);
                });
            }
        }
    }
});

请注意，我没有使用.ready()，而是将其包装在$timeout中。 {ng}重复元素真正完成呈现时，$timeout确保执行它（因为$timeout将在当前摘要周期结束时执行 - 并且它也将调用{{1}在内部，与$apply 不同。所以在setTimeout完成之后，我们使用ng-repeat向外部作用域（兄弟和父作用域）发出一个事件。

然后在你的控制器中，你可以用$emit：

来捕获它

$on

html看起来像这样：

$scope.counter = 0;
$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
    $scope.counter++;
    if($scope.counter == 3){
        //CallYourMethodHere()
        $scope.counter = 0;
    } 
});

如果您不清楚指令，请查看此文档：

https://docs.angularjs.org/guide/directive

参考： Answere基于Calling a function when ng-repeat has finished因为用户已经看到了这个回答但仍有问题。（我刚在控制器内添加了计数器）。

Answer 2

您应该创建一个指令并将该指令包含在您的ng-repeat元素中。

<div ng-repeat="list in arr | filter: {DegreeName: 'test'}">
    <div class="saveprogram" directive-to-Do-something>save program</div>
</div>

然后，当创建并加载类元素 saveprogram 时，指令将完成该任务。这是指令的目的：将新行为附加到特定元素，我理解的是您想要的。

Answer 3

保持jQuery样式事件注册，您可以使用...

MainActivity

代替您想要处理的事件。

你只需要做一次，你就不必等到`ng-repeat完成渲染

Answer 4

正确的角度方法是使用内置事件指令，如ng-click。

无论你在控制器中的那个事件处理程序中做什么，都会在需要时更新范围模型和服务器

<div ng-repeat="list in arr | filter: {DegreeName: 'abc'}">
    <div class="saveprogram" ng-click="saveProgram(list)">save program</div>
</div>

如果你需要在这些元素上使用插件，那么创建一个自定义指令，当jQuery包含在页面之前的页面中时，每个元素都作为jQuery对象公开

Answer 5

好吧，我不知道你这样做的目的是什么，但是你肯定不需要为此创建一个指令。您可以创建一个函数并在$last的每个ngRepeat元素中调用它，然后递增一个变量，当它变为3时，您可以这样做：

ng-init="$last && increment()"

以下是演示：

(function() {
  "use strict";
  angular.module('app', [])
    .controller('mainCtrl', function($scope) {
      $scope.items = [];
      for (var i = 1; i <= 50; i++) {
        $scope.items.push('Item ' + i);
      }

      var inc = 0;
      $scope.increment = function() {
        inc++;
        if (inc == 3) {
          // do something
          console.log(inc);
        }
      }
    });

})();

<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <div ng-repeat="item in items" ng-init="$last && increment()">
    <div class="saveprogram">save program</div>
  </div>
  <div ng-repeat="item in items" ng-init="$last && increment()">
    <div class="saveprogram">save program</div>
  </div>
  <div ng-repeat="item in items" ng-init="$last && increment()">
    <div class="saveprogram">save program</div>
  </div>
</body>

</html>

在渲染所有ng-repeats时调用函数

5 个答案: