AngularJS - Callback nach ng-repeat update

Question

Ich habe ein paar Probleme damit zu verstehen, wie ich einen Rückruf mache, nachdem ich eine ng-Wiederholung aktualisiert habe. Ich möchte im Grunde eine Rückruffunktion ausführen können, nachdem meine Updates für meine ng-Wiederholung beendet wurden. Derzeit haben diese:

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

<div ng-app="myApp"> 
    <div ng-controller="MyController"> 
     <button ng-click="buttonClicked()">Highlight random</button> 
     <ul class="item" > 
      <li ng-repeat="item in data" ng-class="{highlight: randomItems.indexOf($index) > -1}" on-last-repeat>{{ item }} </li> 
     </ul> 
    </div> 
</div> 

Link zu fummeln: https://jsfiddle.net/hbhodgm3/

So wie die "App" funktioniert, ist, dass sie den Inhalt des Daten-Array listet dann, wenn Sie auf Der "Highlight" -Knopf markiert zufällig 2 in der Liste. Also mein Problem ist, dass ich eine Callback-Funktion für die Hervorhebung/DOM-Rendering haben möchte. Ich habe einen Weg gefunden, dies für die erste ng-Wiederholung mit $ scope.first und $ scope.last zu tun, um zu überprüfen, wann ng-repeat durchgeführt wird, aber scheint nicht mit der Hervorhebung zu arbeiten.

Hoffnung habe ich es geschafft, das Problem zu erklären,

Vielen Dank im Voraus.

Answer 1

Siehe $ q und verspricht für ein besseres Verständnis, wie man mit der asynchronen Natur des eckigen arbeitet.

getRandomItems(this.data.length); Vorausgesetzt ist ein API-Aufruf, der Sekunden dauern könnte auszuführen:

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; 
}