我想调用一些jQuery函数针对div表。该表由ng-repeat填充。
当我打开它的时候
$(document).ready()
我没有结果。
也
$scope.$on('$viewContentLoaded', myFunc);
没有帮助。
是否有办法在ng-repeat填充完成后立即执行函数?我读了一个关于使用自定义指令的建议，但我不知道如何使用ng-repeat和我的div…
当前回答
实际上，您应该使用指令，并且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的应用吧。
其他回答
<div ng-repeat="i in items">
<label>{{i.Name}}</label>
<div ng-if="$last" ng-init="ngRepeatFinished()"></div>
</div>
我的解决方案是添加一个div来调用一个函数，如果项目是repeat中的最后一个。
实际上，您应该使用指令，并且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的应用吧。
如果你只是想在循环的末尾执行一些代码，这里有一个稍微简单的变体，不需要额外的事件处理:
<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-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内容更新时调用一个函数，那么你必须在这个线程上使用一个自定义指令的其他答案之一。
