Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/24.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript ng repeat已完成时触发事件';工作_Javascript_Angularjs_Angularjs Ng Repeat - Fatal编程技术网

Javascript ng repeat已完成时触发事件';工作

Javascript ng repeat已完成时触发事件';工作,javascript,angularjs,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Ng Repeat,在ng repeat完成对dom的更改后,我需要更新特定元素的样式。这是我的挑战。当我将项添加到模型中时,我为激发ng repeat work而编写的指令很好,但是当我从项中移除对象时,它不会被调用 我添加了一个函数,可以从列表中随机推送和弹出数据。您将看到pop不会触发ng repeat指令调用。不管怎样,你想解决这个问题吗 var module = angular.module('testApp', []) .directive('onFinishRender', function ($ti

在ng repeat完成对dom的更改后,我需要更新特定元素的样式。这是我的挑战。当我将项添加到模型中时,我为激发ng repeat work而编写的指令很好,但是当我从项中移除对象时,它不会被调用

我添加了一个函数,可以从列表中随机推送和弹出数据。您将看到pop不会触发ng repeat指令调用。不管怎样,你想解决这个问题吗

var module = angular.module('testApp', [])
.directive('onFinishRender', function ($timeout) {
return {
    restrict: 'A',
    link: function (scope, element, attr) {
        if (scope.$last === true) {
            scope.$evalAsync(attr.onFinishRender);
        }
    }
}
});
您可以执行以下操作:

<p ng-repeat="t in ta" on-finish-render="test()"
    ng-init="myFunction($last, t)">{{t}}</p>
是创建元素时运行的属性。
如果当前元素是
ng repeat
中的最后一个元素,则为
true
的布尔值

您可以执行以下操作:

<p ng-repeat="t in ta" on-finish-render="test()"
    ng-init="myFunction($last, t)">{{t}}</p>
是创建元素时运行的属性。
如果当前元素是
ng repeat
中的最后一个元素,则为
true
的布尔值


为什么不使用$watch

$scope.$watch('ta', function (newVal, oldValue) {
    if(oldValue.length > 0)
    {
        var i = 0; // do something
    }
}, true);
通过这种方式,您可以控制将项目推送或弹出到阵列的时间


为什么不使用$watch

$scope.$watch('ta', function (newVal, oldValue) {
    if(oldValue.length > 0)
    {
        var i = 0; // do something
    }
}, true);
通过这种方式,您可以控制将项目推送或弹出到阵列的时间

好吧,您可以向数组中添加一个元素。因此,在渲染时,它肯定会触发自己的
link()
函数。请记住,为数组中具有自己作用域的每个元素创建一个
onFinishRender
指令

数组长度更改后,要执行什么操作?也许一个指令不是正确的尝试。

好吧,您可以向数组中添加一个元素。因此,在渲染时,它肯定会触发自己的
link()
函数。请记住,为数组中具有自己作用域的每个元素创建一个
onFinishRender
指令


数组长度更改后,要执行什么操作?也许指令不是正确的尝试。

我在中找到了解决方案

事实证明,没有好的方法来实现这一功能。我已经写了一个过滤器,它基本上实现了我想要它做的事情。基本原则是:

app.filter('ngRepeatFinish', function($timeout){
    return function(data, scope){
        //var scope = this;
        var flagProperty = '__finishedRendering__';
        if(!data[flagProperty]){
            Object.defineProperty(
                data, 
                flagProperty, 
                {enumerable:false, configurable:true, writable: false, value:{}});
            $timeout(function(){
                    delete data[flagProperty];                        
                    scope.$emit('ngRepeatFinished');
                },0,false);                
        }
        return data;
    };
})
上面的过滤器为创建的每个元素广播,我可以根据控制器中的侦听事件运行我的手表

$scope.$on('ngRepeatFinished', function() {
    //Work thy magic
})
要调用这个指令,我必须从HTML中传递作用域,并通过ngRepeatFinish前面的这个来完成

<div ng-repeat="item in (items | ngRepeatFinish:this)"></div>

我发现解决方案正在四处寻找

事实证明,没有好的方法来实现这一功能。我已经写了一个过滤器,它基本上实现了我想要它做的事情。基本原则是:

app.filter('ngRepeatFinish', function($timeout){
    return function(data, scope){
        //var scope = this;
        var flagProperty = '__finishedRendering__';
        if(!data[flagProperty]){
            Object.defineProperty(
                data, 
                flagProperty, 
                {enumerable:false, configurable:true, writable: false, value:{}});
            $timeout(function(){
                    delete data[flagProperty];                        
                    scope.$emit('ngRepeatFinished');
                },0,false);                
        }
        return data;
    };
})
上面的过滤器为创建的每个元素广播,我可以根据控制器中的侦听事件运行我的手表

$scope.$on('ngRepeatFinished', function() {
    //Work thy magic
})
要调用这个指令,我必须从HTML中传递作用域,并通过ngRepeatFinish前面的这个来完成

<div ng-repeat="item in (items | ngRepeatFinish:this)"></div>

简单有效的方法

<li ng-repeat="data in dataList" ng-init="$last && $parent.myOnFinishHandler();" ></li>

  • {{data}

简单有效的方法

<li ng-repeat="data in dataList" ng-init="$last && $parent.myOnFinishHandler();" ></li>

  • {{data}

我做了一个快速检查,
ng init
在我删除元素时没有被触发。这本质上就是我需要更新dom height.Hm的事件,这可能是因为现有元素没有被更新。我不太确定如何解决这个问题。只要我向数组中添加内容,该指令就可以正常工作。我需要帮助的是删除,我做了一个快速检查,
nginit
在删除元素时没有被触发。这本质上就是我需要更新dom height.Hm的事件,这可能是因为现有元素没有被更新。我不太确定如何解决这个问题。只要我向数组中添加内容,该指令就可以正常工作。如果(oldValue.length!==newValue.length),那么这应该可以工作。在ng repeat完成操作后,我实际上需要dom元素的高度。这将在dom操作结束前触发。是否要在删除列表项后显示整个列表的高度?@Gen4ik yep,父元素的高度。我还有一个ng重复,另一个ng重复。因此,我不确定对象的名称是否可以观察单个对象的变化。基本上是寻找一种不太脏的方法来实现这一点。
如果(oldValue.length!==newValue.length)
,那么这应该是可行的。我实际上需要在ng repeat完成其操作后dom元素的高度。这将在dom操作结束前触发。是否要在删除列表项后显示整个列表的高度?@Gen4ik yep,父元素的高度。我还有一个ng重复,另一个ng重复。因此,我不确定对象的名称是否可以观察单个对象的变化。基本上是在寻找一种不太肮脏的方式来实现这一点。没错。我必须用过滤器,没错。我不得不使用过滤器。