AngularJS-ng重复更新后的回调

AngularJS-ng重复更新后的回调,angularjs,callback,ng-repeat,Angularjs,Callback,Ng Repeat,在更新ng repeat后,我很难理解如何进行回调。我基本上希望能够使一个回调函数后,我的更新我的ng重复已经完成。目前有: var app = angular.module('myApp', []); app.directive('onLastRepeat', function() { return function(scope, element, attrs) { if (scope.$first) console.log("ng-repeat

在更新ng repeat后,我很难理解如何进行回调。我基本上希望能够使一个回调函数后,我的更新我的ng重复已经完成。目前有:

var app = angular.module('myApp', []);

app.directive('onLastRepeat', function() {
    return function(scope, element, attrs) {
        if (scope.$first)
           console.log("ng-repeat starting - Index: " + scope.$index) 
        if (scope.$last) setTimeout(function(){
           console.log("ng-rpeat finished - Index: " + scope.$index);
        }, 1);
    };
});

app.controller('MyController', function($scope) {
    $scope.data = [1,2,3,4,5,6,7,8,9,10,12,12,13,14,15,16,17,18,19,20];

    $scope.buttonClicked = function() {
        console.log('Btn clicked');
        $scope.randomItems = getRandomItems(this.data.length);
    };
});
HTML


突出显示随机
    上次重复时,{{item}}
链接到小提琴:

因此,“应用程序”的工作原理是,它列出数据数组的内容,然后当您单击“突出显示”按钮时,它会随机突出显示列表中的2。因此,我的问题是,我希望在高亮显示/DOM渲染完成时有一个回调函数。我找到了一种方法,可以使用$scope.first和$scope.last对初始ng repeat执行此操作,以检查ng repeat何时完成,但似乎不适用于突出显示

希望我能解释这个问题


提前谢谢

请参阅$q和Promises,以更好地了解如何使用angular异步特性

假定
getRandomItems(this.data.length)
是一个API调用,可能需要几秒钟才能执行:

asyncItems(this.data.length).then(function(randoms){

  $scope.randomItems = randoms;
  //handle post rendering callback
});


function asyncItems(length) {
  var deferred = $q.defer();
  var items = getRandomItems(length);
  if (items){
    deferred.resolve(items);
  }   
  else {
    //no items :(
    deferred.reject([]);
  }

  return deferred.promise;
}

您捕获的是循环的最后一次渲染,而不是新的摘要周期更新。为什么不在
$scope.randomItems=getRandomItems(this.data.length)之后做你的事情呢?如果我在
$scope.randomItems=getRandomItems(this.data.length)之后处理事件它似乎在呈现更改之前开始。我希望能够在呈现更改(突出显示)时找到回调。使用Angular进行一个小DOM渲染实验,本例中的列表为10000+,然后代码在渲染更改之前开始执行。如果列表如此长,则最好将其分为视图允许的大小,以便平滑滚动列表。您不能期望每个客户机都能够完美地处理如此大的数据集并呈现其整体。
asyncItems(this.data.length).then(function(randoms){

  $scope.randomItems = randoms;
  //handle post rendering callback
});


function asyncItems(length) {
  var deferred = $q.defer();
  var items = getRandomItems(length);
  if (items){
    deferred.resolve(items);
  }   
  else {
    //no items :(
    deferred.reject([]);
  }

  return deferred.promise;
}