Javascript ng repeat已完成时触发事件';工作
在ng repeat完成对dom的更改后,我需要更新特定元素的样式。这是我的挑战。当我将项添加到模型中时,我为激发ng repeat work而编写的指令很好,但是当我从项中移除对象时,它不会被调用 我添加了一个函数,可以从列表中随机推送和弹出数据。您将看到pop不会触发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
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重复。因此,我不确定对象的名称是否可以观察单个对象的变化。基本上是在寻找一种不太肮脏的方式来实现这一点。没错。我必须用过滤器,没错。我不得不使用过滤器。