我想调用一些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…
当前回答
我在这里找到了一个很好的答案,但仍然有必要增加一个延迟
创建以下指令:
angular.module('MyApp').directive('emitLastRepeaterElement', function() {
return function(scope) {
if (scope.$last){
scope.$emit('LastRepeaterElement');
}
}; });
将它作为一个属性添加到你的中继器中,像这样:
<div ng-repeat="item in items" emit-last-repeater-element></div>
根据Radu的说法:
$scope.eventoSelecionado.internamento_evolucoes.forEach(ie => {mycode});
对我来说,它是有效的,但我仍然需要添加一个setTimeout
$scope.eventoSelecionado.internamento_evolucoes.forEach(ie => {
setTimeout(function() {
mycode
}, 100); });
其他回答
我必须在ng-repeat结束后使用MathJax渲染公式,上面的答案都没有解决我的问题,所以我做了如下。这不是一个很好的解决方案,但对我来说很有效。
<div ng-repeat="formula in controller.formulas">
<div>{{formula.string}}</div>
{{$last ? controller.render_formulas() : ""}}
</div>
当你检查范围时,这也是必要的。用setTimeout(someFn, 0)来包装你的触发器。setTimeout 0是javascript中被接受的技术,它是我的指令正确运行的必要条件。
实际上,您应该使用指令,并且ng-Repeat循环的末尾没有绑定事件(因为每个元素都是单独构造的,并且有自己的事件)。但是a)使用指令可能是你所需要的,b)有一些ng-Repeat特定的属性,你可以使用它来创建你的“on ngRepeat finished”事件。
具体来说,如果你想要的只是在整个表中添加事件样式,你可以使用包含所有ngRepeat元素的指令来实现。另一方面,如果你想具体地处理每个元素,你可以在ngRepeat中使用一个指令,它将在每个元素被创建后作用于每个元素。
然后,还有可以用来触发事件的$index、$first、$middle和$last属性。对于这个HTML:
<div ng-controller="Ctrl" my-main-directive>
<div ng-repeat="thing in things" my-repeat-directive>
thing {{thing}}
</div>
</div>
你可以像这样使用指令:
angular.module('myApp', [])
.directive('myRepeatDirective', function() {
return function(scope, element, attrs) {
angular.element(element).css('color','blue');
if (scope.$last){
window.alert("im the last!");
}
};
})
.directive('myMainDirective', function() {
return function(scope, element, attrs) {
angular.element(element).css('border','5px solid red');
};
});
看看这款Plunker的应用吧。
我是这样做的。
创建指令
function finRepeat() {
return function(scope, element, attrs) {
if (scope.$last){
// Here is where already executes the jquery
$(document).ready(function(){
$('.materialboxed').materialbox();
$('.tooltipped').tooltip({delay: 50});
});
}
}
}
angular
.module("app")
.directive("finRepeat", finRepeat);
在你把它添加到这个ng-repeat的标签上之后
<ul>
<li ng-repeat="(key, value) in data" fin-repeat> {{ value }} </li>
</ul>
然后在ng-repeat结束时运行。
我想补充另一个答案,因为前面的答案需要在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的人来说,它会导致另一个完全不必要的消化周期