我想调用一些jQuery函数针对div表。该表由ng-repeat填充。
当我打开它的时候
$(document).ready()
我没有结果。
也
$scope.$on('$viewContentLoaded', myFunc);
没有帮助。
是否有办法在ng-repeat填充完成后立即执行函数?我读了一个关于使用自定义指令的建议,但我不知道如何使用ng-repeat和我的div…
我想调用一些jQuery函数针对div表。该表由ng-repeat填充。
当我打开它的时候
$(document).ready()
我没有结果。
也
$scope.$on('$viewContentLoaded', myFunc);
没有帮助。
是否有办法在ng-repeat填充完成后立即执行函数?我读了一个关于使用自定义指令的建议,但我不知道如何使用ng-repeat和我的div…
当前回答
如果你只是想在循环的末尾执行一些代码,这里有一个稍微简单的变体,不需要额外的事件处理:
<div ng-controller="Ctrl">
<div class="thing" ng-repeat="thing in things" my-post-repeat-directive>
thing {{thing}}
</div>
</div>
function Ctrl($scope) {
$scope.things = [
'A', 'B', 'C'
];
}
angular.module('myApp', [])
.directive('myPostRepeatDirective', function() {
return function(scope, element, attrs) {
if (scope.$last){
// iteration is complete, do whatever post-processing
// is necessary
element.parent().css('border', '1px solid black');
}
};
});
观看现场演示。
其他回答
如果你只是想改变类名,让它以不同的方式呈现,下面的代码可以做到这一点。
<div>
<div ng-show="loginsuccess" ng-repeat="i in itemList">
<div id="{{i.status}}" class="{{i.status}}">
<div class="listitems">{{i.item}}</div>
<div class="listitems">{{i.qty}}</div>
<div class="listitems">{{i.date}}</div>
<div class="listbutton">
<button ng-click="UpdateStatus(i.$id)" class="btn"><span>Done</span></button>
<button ng-click="changeClass()" class="btn"><span>Remove</span></button>
</div>
<hr>
</div>
这段代码适用于我,当我有一个类似的需求,以strick槽字体呈现购物清单中的购物项目时。
没有必要创建一个指令,特别是为了有一个ng-repeat完成事件。
Ng-init会为您带来魔力。
<div ng-repeat="thing in things" ng-init="$last && finished()">
$last确保,当最后一个元素被呈现给DOM时,finished才会被触发。
不要忘记创建$scope。完成事件。
编码快乐! !
编辑:2016年10月23日
如果你还想在数组中没有项的情况下调用完成的函数,那么你可以使用下面的解决方法
<div style="display:none" ng-init="things.length < 1 && finished()"></div>
//or
<div ng-if="things.length > 0" ng-init="finished()"></div>
只需在ng-repeat元素的顶部添加上面的行。它将检查数组是否没有任何值,并相应地调用函数。
E.g.
<div ng-if="things.length > 0" ng-init="finished()"></div>
<div ng-repeat="thing in things" ng-init="$last && finished()">
也许用ngInit和Lodash的debounce方法更简单一点,不需要自定义指令:
控制器:
$scope.items = [1, 2, 3, 4];
$scope.refresh = _.debounce(function() {
// Debounce has timeout and prevents multiple calls, so this will be called
// once the iteration finishes
console.log('we are done');
}, 0);
模板:
<ul>
<li ng-repeat="item in items" ng-init="refresh()">{{item}}</li>
</ul>
更新
还有一个使用三元运算符的更简单的纯AngularJS解决方案:
模板:
<ul>
<li ng-repeat="item in items" ng-init="$last ? doSomething() : null">{{item}}</li>
</ul>
注意ngInit使用预链接编译阶段——即在处理子指令之前调用表达式。这意味着仍然需要异步处理。
我想补充另一个答案,因为前面的答案需要在ngRepeat完成后运行的代码是一个angular代码,在这种情况下,所有的答案都给出了一个伟大而简单的解决方案,有些比其他的更通用,如果它的重要的摘要生命周期阶段,你可以看看本纳德尔的博客,除了使用$parse而不是$eval。
但根据我的经验,OP状态,它通常在最终编译的DOM上运行一些JQuery插件或方法,在这种情况下,我发现最简单的解决方案是创建一个带有setTimeout的指令,因为setTimeout函数被推到浏览器队列的末尾,它总是在angular中所有事情都完成之后,通常是ngReapet,它继续在它的父母postLinking函数之后
angular.module('myApp', [])
.directive('pluginNameOrWhatever', function() {
return function(scope, element, attrs) {
setTimeout(function doWork(){
//jquery code and plugins
}, 0);
};
});
对于那些想知道在这种情况下为什么不使用$timeout的人来说,它会导致另一个完全不必要的消化周期
如果你只是想在循环的末尾执行一些代码,这里有一个稍微简单的变体,不需要额外的事件处理:
<div ng-controller="Ctrl">
<div class="thing" ng-repeat="thing in things" my-post-repeat-directive>
thing {{thing}}
</div>
</div>
function Ctrl($scope) {
$scope.things = [
'A', 'B', 'C'
];
}
angular.module('myApp', [])
.directive('myPostRepeatDirective', function() {
return function(scope, element, attrs) {
if (scope.$last){
// iteration is complete, do whatever post-processing
// is necessary
element.parent().css('border', '1px solid black');
}
};
});
观看现场演示。