[英]Angular.js ng-repeat callback
I need to send a callback when ng-repeat
finishes, but my solutions don't work. 我需要在
ng-repeat
完成时发送回调,但我的解决方案不起作用。 In my last solution I used a directive to do it. 在我的上一个解决方案中,我使用了一个指令来完成它
Markup: 标记:
<div class="results" ng-model="results">
<div class="empl-card" ng-repeat="empl in employees | filter: searchQuery" callback-on-end="alert('callback')">
...
</div>
</div>
directive: 指示:
app.directive("callbackOnEnd", function() {
return {
restrict: "A",
link: function(scope, element, attrs) {
if (scope.$last) {
scope.$eval(attrs.callbackOnEnd);
}
}
};
});
Where could I have made a mistake? 我哪里可以犯错?
I think you can do this with just ngInit as follows; 我认为你可以用ngInit做到这一点,如下所示;
<div class="results" ng-model="results">
<div class="empl-card" ng-repeat="empl in employees | filter: searchQuery" ng-init="$last && alert('callback')">
...
</div>
</div>
You don't need a custom directive for doing this. 您不需要自定义指令来执行此操作。
To achieve this you need to make a method in your controller and call that method when the ng-repeat ends : 要实现这一点,您需要在控制器中创建一个方法,并在ng-repeat结束时调用该方法:
(function() { angular.element(document).ready(function() { var app = angular.module('myApp', []); app.controller("MyCtrl", function($scope, $timeout) { $scope.names = ['A', 'B', 'C', 'D']; $scope.onEnd = function() { alert('all done'); }; }); app.directive("callbackOnEnd", function() { return { restrict: "A", link: function(scope, element, attrs) { if (scope.$last) { scope.$eval(attrs.callbackOnEnd); } } }; }); angular.bootstrap(document, ['myApp']); }); }());
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-controller="MyCtrl" class="well"> <h3 ng-repeat="name in names" callback-on-end="onEnd()">{{name}}</h3> </div>
Or you will have to eval
the javascript code 或者你必须
eval
javascript代码
app.directive("callbackOnEnd", function() {
return {
restrict: "A",
link: function(scope, element, attrs) {
if (scope.$last) {
eval(attrs.callbackOnEnd);
}
}
};
});
(function() { angular.element(document).ready(function() { var app = angular.module('myApp', []); app.controller("MyCtrl", function($scope, $timeout) { $scope.names = ['A', 'B', 'C', 'D']; $scope.onEnd = function() { alert('all done'); }; }); app.directive("callbackOnEnd", function() { return { restrict: "A", link: function(scope, element, attrs) { if (scope.$last) { eval(attrs.callbackOnEnd); } } }; }); angular.bootstrap(document, ['myApp']); }); }());
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-controller="MyCtrl" class="well"> <h3 ng-repeat="name in names" callback-on-end="alert('done')">{{name}}</h3> </div>
Find good explanation here : https://stackoverflow.com/a/15671573/3603806 在这里找到很好的解释: https : //stackoverflow.com/a/15671573/3603806
Check here. 点击这里 Created custom directive for repeatEnd http://plnkr.co/edit/YhGzYFOcVaVds7iAEWPn?p=preview
为repeatEnd创建自定义指令http://plnkr.co/edit/YhGzYFOcVaVds7iAEWPn?p=preview
<h3 ng-repeat="name in names" repeat-end="onEnd()">{{name}}</h3>
app.js app.js
angular.element(document).ready(function() {
var app = angular.module('repApp', []);
app.controller("MainCtrl", function($scope, $timeout) {
$scope.names = ['user1', 'user2', 'user3'];
$scope.onEnd = function() {
$timeout(function() {
alert('all done');
}, 1);
};
});
app.directive("repeatEnd", function() {
return {
restrict: "A",
link: function(scope, element, attrs) {
if (scope.$last) {
scope.$eval(attrs.repeatEnd);
}
}
};
});
angular.bootstrap(document, ['repApp']);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.