249

我想要实现的基本上是一个“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/

4

10 回答 10

400 
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>
于 2013-03-04T18:23:51.913 回答
89

如果您希望在构造 DOM 之后但在浏览器呈现之前执行回调（即 test()），请使用$evalAsync 。这将防止闪烁 -参考。

if (scope.$last) {
   scope.$evalAsync(attr.onFinishRender);
}

小提琴。

如果您真的想在渲染后调用回调，请使用 $timeout：

if (scope.$last) {
   $timeout(function() { 
      scope.$eval(attr.onFinishRender);
   });
}

我更喜欢 $eval 而不是事件。对于一个事件，我们需要知道该事件的名称并将该事件的代码添加到我们的控制器中。使用 $eval，控制器和指令之间的耦合更少。

于 2013-03-04T19:19:09.407 回答
29

到目前为止给出的答案只会在第一次ng-repeat渲染时起作用，但如果你有一个动态的ng-repeat，这意味着你将要添加/删除/过滤项目，并且每次需要通知你ng-repeat被渲染，这些解决方案对你不起作用。

所以，如果你需要每次都被通知ng-repeat重新渲染，而不仅仅是第一次，我已经找到了一种方法来做到这一点，这很“hacky”，但如果你知道你是什么，它会工作得很好正在做。$filter在你使用ng-repeat 任何其他之前使用它$filter：

.filter('ngRepeatFinish', function($timeout){
    return function(data){
        var me = this;
        var flagProperty = '__finishedRendering__';
        if(!data[flagProperty]){
            Object.defineProperty(
                data, 
                flagProperty, 
                {enumerable:false, configurable:true, writable: false, value:{}});
            $timeout(function(){
                    delete data[flagProperty];                        
                    me.$emit('ngRepeatFinished');
                },0,false);                
        }
        return data;
    };
})

这将在每次渲染时$emit调用一个事件。ngRepeatFinishedng-repeat

如何使用它：

<li ng-repeat="item in (items|ngRepeatFinish) | filter:{name:namedFiltered}" >

ngRepeatFinish过滤器需要直接应用到您定义的一个Array或一个，之后您可以应用其他过滤器。Object$scope

如何不使用它：

<li ng-repeat="item in (items | filter:{name:namedFiltered}) | ngRepeatFinish" >

不要先应用其他过滤器，然后再应用ngRepeatFinish过滤器。

我什么时候应该使用这个？

如果您想在列表完成渲染后将某些 css 样式应用到 DOM 中，因为您需要考虑已被重新渲染的 DOM 元素的新尺寸ng-repeat。（顺便说一句：这类操作应该在指令内完成）

ngRepeatFinished在处理事件的函数中不要做什么：

  • 不要$scope.$apply在该函数中执行 a ，否则您会将 Angular 置于 Angular 无法检测到的无限循环中。

  • 不要使用它来更改$scope属性，因为这些更改在下一个循环之前不会反映在您的视图中$digest，并且由于您无法执行$scope.$apply它们将没有任何用处。

“但过滤器不应该那样使用！！”

不，他们不是，这是一个 hack，如果你不喜欢它就不要使用它。如果你知道更好的方法来完成同样的事情，请告诉我。

总结

这是一个 hack，以错误的方式使用它是危险的，仅在ng-repeat完成渲染后使用它来应用样式，你不应该有任何问题。

于 2014-09-29T03:04:14.137 回答
10

如果你需要在同一个控制器上为不同的 ng-repeats 调用不同的函数，你可以尝试这样的事情：

指令：

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.broadcasteventname ? attr.broadcasteventname : 'ngRepeatFinished');
            });
            }
        }
    }
});

在您的控制器中，使用 $on 捕获事件：

$scope.$on('ngRepeatBroadcast1', function(ngRepeatFinishedEvent) {
// Do something
});

$scope.$on('ngRepeatBroadcast2', function(ngRepeatFinishedEvent) {
// Do something
});

在具有多个 ng-repeat 的模板中

<div ng-repeat="item in collection1" on-finish-render broadcasteventname="ngRepeatBroadcast1">
    <div>{{item.name}}}<div>
</div>

<div ng-repeat="item in collection2" on-finish-render broadcasteventname="ngRepeatBroadcast2">
    <div>{{item.name}}}<div>
</div>
于 2015-06-05T15:10:18.677 回答
5

其他解决方案在初始页面加载时可以正常工作，但从控制器调用 $timeout 是确保在模型更改时调用函数的唯一方法。这是一个使用 $timeout的工作小提琴。对于您的示例，它将是：

.controller('myC', function ($scope, $timeout) {
$scope.$watch("ta", function (newValue, oldValue) {
    $timeout(function () {
       test();
    });
});

ngRepeat 只会在行内容是新的时评估指令，因此如果您从列表中删除项目，onFinishRender 将不会触发。例如，尝试在这些 fiddles 中输入过滤器值emit。

于 2014-01-31T01:44:06.717 回答
4

如果您不反对使用双美元范围道具并且您正在编写一个唯一内容是重复的指令，那么有一个非常简单的解决方案（假设您只关心初始渲染）。在链接函数中：

const dereg = scope.$watch('$$childTail.$last', last => {
    if (last) {
        dereg();
        // do yr stuff -- you may still need a $timeout here
    }
});

这对于您有一个指令需要根据渲染列表成员的宽度或高度执行 DOM 操作的情况很有用（我认为这是最有可能提出这个问题的原因），但它不是通用的作为已经提出的其他解决方案。

于 2016-09-26T03:53:03.680 回答
3

我很惊讶在这个问题的答案中没有看到最简单的解决方案。你想要做的是ngInit在你的重复元素（带有ngRepeat指令的元素）上添加一个指令，检查$last（一个在范围内设置的特殊变量ngRepeat，指示重复元素是列表中的最后一个）。如果$last是真的，我们正在渲染最后一个元素，我们可以调用我们想要的函数。

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

您的 HTML 标记的完整代码是：

<div ng-app="testApp" ng-controller="myC">
    <p ng-repeat="t in ta" ng-init="$last && test()">{{t}}</p>
</div>

除了要调用的范围函数（在本例中为 ）之外，您的应用程序中不需要任何额外的 JS 代码，test因为ngInit它由 Angular.js 提供。只需确保您的test函数在范围内，以便可以从模板访问它：

$scope.test = function test() {
    console.log("test executed");
}
于 2018-11-30T16:04:12.837 回答
1

使用过滤的 ngRepeat 解决此问题的方法可能是使用Mutation事件，但它们已被弃用（没有立即替换）。

然后我想到了另一个简单的方法：

app.directive('filtered',function($timeout) {
    return {
        restrict: 'A',link: function (scope,element,attr) {
            var elm = element[0]
                ,nodePrototype = Node.prototype
                ,timeout
                ,slice = Array.prototype.slice
            ;

            elm.insertBefore = alt.bind(null,nodePrototype.insertBefore);
            elm.removeChild = alt.bind(null,nodePrototype.removeChild);

            function alt(fn){
                fn.apply(elm,slice.call(arguments,1));
                timeout&&$timeout.cancel(timeout);
                timeout = $timeout(altDone);
            }

            function altDone(){
                timeout = null;
                console.log('Filtered! ...fire an event or something');
            }
        }
    };
});

这通过一键式 $timeout 挂钩到父元素的 Node.prototype 方法，以观察后续修改。

它的工作原理大部分是正确的，但我确实遇到了一些 altDone 会被调用两次的情况。

再次...将此指令添加到 ngRepeat 的父级。

于 2015-04-22T08:57:13.523 回答
1

很简单，我就是这样做的。

.directive('blockOnRender', function ($blockUI) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            
            if (scope.$first) {
                $blockUI.blockElement($(element).parent());
            }
            if (scope.$last) {
                $blockUI.unblockElement($(element).parent());
            }
        }
    };
})

于 2016-01-28T16:26:20.740 回答
0

请看一下小提琴，http://jsfiddle.net/yNXS2/。由于您创建的指令没有创建新的范围，我继续这样做。

$scope.test = function(){...做到了。

于 2013-03-04T18:10:18.467 回答