Comment déclencher une méthode lorsque Angulaire est fait en ajoutant de la portée des mises à jour du DOM?

Je bifurquais votre violon.
http://jsfiddle.net/xGCmp/7/

J'ai ajouté une directive appelée émettent-quand. Elle prend deux paramètres. Le cas échéant, être émis et la condition qui doit être satisfaite pour que l'événement soit émis. Cela fonctionne parce que quand la fonction de lien est exécuté dans la directive, nous savons que l'élément a été rendu dans les DOM. Ma solution est d'émettre un événement lorsque le dernier élément de la ng-repeat a été rendue.

Si nous avons eu un tout Angulaire de la solution, je ne recommanderais pas cela. Il est une sorte de hacky. Mais, il pourrait être un okey solution pour la manutention, le type de code hérité que vous mentionnez.

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

myApp.controller("myController", ['$scope', function($scope){
    var resultsToLoad = [
        {id: 1, name: "one"},
        {id: 2, name: "two"},
        {id: 3, name: "three"}
    ];

    function doneAddingToDom() {
        console.log(document.getElementById('renderedList').children.length);
    }

    $scope.results = [];

    $scope.loadResults = function(){
        $scope.results = resultsToLoad;
        //If run doneAddingToDom here, we will find 0 list elements in the DOM. Check console.
        doneAddingToDom();
    }

    //If we run on doneAddingToDom here, we will find 3 list elements in the DOM.
    $scope.$on('allRendered', doneAddingToDom);
}]);

myApp.directive("emitWhen", function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var params = scope.$eval(attrs.emitWhen),
                event = params.event,
                condition = params.condition;
            if(condition){
                scope.$emit(event);
            }
        }
    }
});

angular.bootstrap(document, ['myApp']);

Si vous êtes comme moi, vous remarquerez que, dans de nombreux cas, $timeout avec une attente de 0 fonctionne bien avant que le DOM est vraiment stable et complètement statique. Quand je veux le DOM pour être stable, je veux qu'il soit stable gosh dang il. Et donc la solution que j'ai trouver est de définir un observateur sur l'élément (ou, comme dans l'exemple ci-dessous l'intégralité du document), pour le "DOMSubtreeModified" de l'événement. Une fois j'ai attendu de 500 millisecondes et il n'y a pas eu de DOM changements, j'ai diffusé un événement comme "domRendered".

IE:

   //todo: Inject $rootScope and $window, 


   //Every call to $window.setTimeout will use this function
   var broadcast = function () {};

   if (document.addEventListener) {

       document.addEventListener("DOMSubtreeModified", function (e) {
           //If less than 500 milliseconds have passed, the previous broadcast will be cleared. 
           clearTimeout(broadcast)
           broadcast = $window.setTimeout(function () {
               //This will only fire after 500 ms have passed with no changes
               $rootScope.$broadcast('domRendered')
           }, 500)

       });

   //IE stupidity
   } else {
       document.attachEvent("DOMSubtreeModified", function (e) {

           clearTimeout(broadcast)
           broadcast = $window.setTimeout(function () {
               $rootScope.$broadcast('domRendered')
           }, 500)

       });
   }

Cet événement peut être accroché dans, à l'instar de toutes les émissions, comme suit:

$rootScope.$on("domRendered", function(){
   //do something
})

intervalle fonctionne pour moi,par exemple:

interval = $interval(function() {
    if ($("#target").children().length === 0) {
        return;
    }
    doSomething();
    $interval.cancel(interval);
}, 0);