我想调用一些jQuery函数针对div表。该表由ng-repeat填充。
当我打开它的时候
$(document).ready()
我没有结果。
也
$scope.$on('$viewContentLoaded', myFunc);
没有帮助。
是否有办法在ng-repeat填充完成后立即执行函数?我读了一个关于使用自定义指令的建议，但我不知道如何使用ng-repeat和我的div…
当前回答
这里有一个使用ng-init的简单方法，甚至不需要自定义指令。在某些情况下，它对我来说工作得很好，例如，需要在页面加载时自动滚动ng-repeat项的div到特定项，因此滚动函数需要等到ng-repeat完成对DOM的渲染后才能触发。
<div ng-controller="MyCtrl">
<div ng-repeat="thing in things">
thing: {{ thing }}
</div>
<div ng-init="fireEvent()"></div>
</div>
myModule.controller('MyCtrl', function($scope, $timeout){
$scope.things = ['A', 'B', 'C'];
$scope.fireEvent = function(){
// This will only run after the ng-repeat has rendered its things to the DOM
$timeout(function(){
$scope.$broadcast('thingsRendered');
}, 0);
};
});
注意，这只对ng-repeat初始渲染后需要调用一次的函数有用。如果你需要在ng-repeat内容更新时调用一个函数，那么你必须在这个线程上使用一个自定义指令的其他答案之一。
其他回答
我必须在ng-repeat结束后使用MathJax渲染公式，上面的答案都没有解决我的问题，所以我做了如下。这不是一个很好的解决方案，但对我来说很有效。
<div ng-repeat="formula in controller.formulas">
<div>{{formula.string}}</div>
{{$last ? controller.render_formulas() : ""}}
</div>
也许用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使用预链接编译阶段——即在处理子指令之前调用表达式。这意味着仍然需要异步处理。
这里有一个使用ng-init的简单方法，甚至不需要自定义指令。在某些情况下，它对我来说工作得很好，例如，需要在页面加载时自动滚动ng-repeat项的div到特定项，因此滚动函数需要等到ng-repeat完成对DOM的渲染后才能触发。
<div ng-controller="MyCtrl">
<div ng-repeat="thing in things">
thing: {{ thing }}
</div>
<div ng-init="fireEvent()"></div>
</div>
myModule.controller('MyCtrl', function($scope, $timeout){
$scope.things = ['A', 'B', 'C'];
$scope.fireEvent = function(){
// This will only run after the ng-repeat has rendered its things to the DOM
$timeout(function(){
$scope.$broadcast('thingsRendered');
}, 0);
};
});
注意，这只对ng-repeat初始渲染后需要调用一次的函数有用。如果你需要在ng-repeat内容更新时调用一个函数，那么你必须在这个线程上使用一个自定义指令的其他答案之一。
我是这样做的。
创建指令
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结束时运行。
<div ng-repeat="i in items">
<label>{{i.Name}}</label>
<div ng-if="$last" ng-init="ngRepeatFinished()"></div>
</div>
我的解决方案是添加一个div来调用一个函数，如果项目是repeat中的最后一个。
