Angular.js ng-repeat callback

14 浏览
0 Comments

Angular.js ng-repeat callback

我需要在ng-repeat完成后发送一个回调，但我的解决方案都没有成功。在我最后的解决方案中，我使用了一个指令来实现。我可能在哪里犯了一个错误？

0

3 答案

0 Comments

Angular.js ng-repeat callback问题的出现原因是需要在ng-repeat循环结束后执行某个回调函数，但是ng-repeat本身并没有提供类似的回调函数。解决方法是通过自定义指令来实现，在指令的link函数中判断当前元素是否是ng-repeat循环的最后一个元素，如果是，则执行指定的回调函数。

具体代码如下：

{{name}}



angular.element(document).ready(function() {
    var app = angular.module('repApp', []);
    app.controller("MainCtrl", function($scope, $timeout) {
        $scope.names = ['user1', 'user2', 'user3'];
        $scope.onEnd = function() {
            $timeout(function() {
                alert('all done');
            }, 1);
        };
    });
    app.directive("repeatEnd", function() {
        return {
            restrict: "A",
            link: function(scope, element, attrs) {
                if (scope.$last) {
                    scope.$eval(attrs.repeatEnd);
                }
            }
        };
    });
    angular.bootstrap(document, ['repApp']);
});

以上代码中，通过定义一个名为repeatEnd的自定义指令，并将其绑定在ng-repeat循环的元素上。在指令的link函数中，通过判断scope.$last来确定当前元素是否是ng-repeat循环的最后一个元素。如果是最后一个元素，则执行指定的回调函数。

这样，当ng-repeat循环结束后，会自动执行onEnd函数，并弹出一个包含'all done'的警告框。

通过以上的解决方法，我们可以在ng-repeat循环结束后执行指定的回调函数，实现一些需要在循环结束后进行的操作。

0
0 Comments

我认为你可以只使用ngInit来实现这个功能，如下所示：


  

    ...

你不需要使用自定义指令来完成这个功能。

0
0 Comments

Angular.js的ng-repeat指令用于在页面上重复显示一个元素或一组元素。然而，在ng-repeat结束后执行回调函数是一个常见的需求，但默认情况下，Angular.js没有提供相应的解决方案。

为了实现这一点，需要在控制器中创建一个方法，并在ng-repeat结束时调用该方法。可以通过自定义指令来实现这一功能。下面是一个示例代码：

(function() {
  angular.element(document).ready(function() {
    var app = angular.module('myApp', []);
    app.controller("MyCtrl", function($scope, $timeout) {
      $scope.names = ['A', 'B', 'C', 'D'];
      $scope.onEnd = function() {
        alert('all done');
      };
    });
    app.directive("callbackOnEnd", function() {
      return {
        restrict: "A",
        link: function(scope, element, attrs) {
          if (scope.$last) {
            scope.$eval(attrs.callbackOnEnd);
          }
        }
      };
    });
    angular.bootstrap(document, ['myApp']);
  });
}());





  
{{name}}

在上述代码中，自定义指令callbackOnEnd会在ng-repeat的最后一个元素上调用onEnd方法。这样，当ng-repeat循环结束时，就会弹出一个提示框显示"all done"。

另外，如果不想创建额外的方法，可以使用eval函数来执行JavaScript代码。下面是使用eval函数的示例：

app.directive("callbackOnEnd", function() {
  return {
    restrict: "A",
    link: function(scope, element, attrs) {
      if (scope.$last) {
        eval(attrs.callbackOnEnd);
      }
    }
  };
});





  
{{name}}

在上述代码中，指令callbackOnEnd会在ng-repeat的最后一个元素上执行attrs.callbackOnEnd中的JavaScript代码。这样，当ng-repeat循环结束时，就会弹出一个提示框显示"done"。

以上就是解决Angular.js ng-repeat回调问题的两种方法。希望对你有所帮助。

参考链接：

[https://stackoverflow.com/a/15671573/3603806](https://stackoverflow.com/a/15671573/3603806)

0