1. 首页
  2. 问题
  3. ng-repeat 完成时调用函数
小编典典

ng-repeat 完成时调用函数

all

我想要实现的基本上是一个“on ng 重复完成渲染”处理程序。我能够检测到它何时完成，但我不知道如何从中触发功能。

检查小提琴：http:
//jsfiddle.net/paulocoelho/BsMqq/3/

JS

var module = angular.module('testApp', [])
    .directive('onFinishRender', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                element.ready(function () {
                    console.log("calling:"+attr.onFinishRender);
                    // CALL TEST HERE!
                });
            }
        }
    }
});

function myC($scope) {
    $scope.ta = [1, 2, 3, 4, 5, 6];
    function test() {
        console.log("test executed");
    }
}

HTML

<div ng-app="testApp" ng-controller="myC">
    <p ng-repeat="t in ta" on-finish-render="test()">{{t}}</p>
</div>

答案 ：finishmove 的工作小提琴：http:
//jsfiddle.net/paulocoelho/BsMqq/4/


阅读 86

收藏
2022-05-24

共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. $timeout确保它在 ng-repeated
元素真正完成渲染$timeout时执行（因为它将在当前摘要周期结束时执行——
它也会在$apply内部调用，不像setTimeout）。因此，在ng- repeat完成后，我们使用$emit向外部范围（兄弟范围和父范围）发出事件。

然后在您的控制器中，您可以使用以下命令捕获它$on：

$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
    //you also get the actual event object
    //do stuff, execute functions -- whatever...
});

使用看起来像这样的 html：

<div ng-repeat="item in items" on-finish-render="ngRepeatFinished">
    <div>{{item.name}}}<div>
</div>
2022-05-24