在ng-repeat结束时调用函数

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

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

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>

答: 工作小提琴从finishingmove: http://jsfiddle.net/paulocoelho/BsMqq/4/

当前回答

使用过滤后的ngRepeat解决这个问题的方法可以是使用突变事件，但它们已被弃用(没有立即替换)。

然后我想到了另一个简单的问题:

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

这与Node挂钩。父元素的原型方法，带有一个滴答的$timeout来观察后续的修改。

它的工作基本正确，但我确实得到了一些情况下，altDone将被调用两次。

再次……将这个指令添加到ngRepeat的父类。

2015-04-22 08:57:13

其他回答

其他解决方案在初始页面加载时工作得很好，但是从控制器调用$timeout是确保在模型更改时调用函数的唯一方法。这里有一个工作小提琴使用$timeout。对于你的例子，它将是:

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

ngRepeat只会在行内容为新时计算指令，所以如果你从列表中删除项目，onFinishRender将不会触发。例如，尝试在这些fiddles发射中输入过滤器值。

2014-01-31 01:44:06

使用过滤后的ngRepeat解决这个问题的方法可以是使用突变事件，但它们已被弃用(没有立即替换)。

然后我想到了另一个简单的问题:

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

这与Node挂钩。父元素的原型方法，带有一个滴答的$timeout来观察后续的修改。

它的工作基本正确，但我确实得到了一些情况下，altDone将被调用两次。

再次……将这个指令添加到ngRepeat的父类。

2015-04-22 08:57:13

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

.directive('blockOnRender'， function ($blockUI) { 返回{ 限制:' A ', 链接:函数(范围，元素，attrs) { If (scope.$first) { (blockUI.blockElement美元(元素).parent ()); ｝ If (scope.$last) { (blockUI.unblockElement美元(元素).parent ()); ｝｝ }; })

2016-01-28 16:26:20

如果你不反对使用双重作用域道具，并且你正在编写一个唯一内容是repeat的指令，那么有一个相当简单的解决方案(假设你只关心初始渲染)。在link函数中:

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

这对于需要根据呈现列表成员的宽度或高度执行DOM manip的指令是有用的(我认为这是人们会问这个问题的最可能的原因)，但它不像已经提出的其他解决方案那样通用。

2016-09-26 03:53:03

请看看小提琴，http://jsfiddle.net/yNXS2/。因为你创建的指令没有创建一个新的范围，我继续在这种方式。

美元的范围。Test = function(){…我做到了。

2013-03-04 18:10:18

在ng-repeat结束时调用函数

推荐文章

最新文章

标签