Esegui direttiva dopo NG-Repeat

Question

Quindi sto cercando di spostare la mia libreria di plugin su Angular laddove possibile, solo per mantenere le cose coerenti. Il problema che sto incontrando è ottenere direttive da seguire dopo che tutte le direttive sui suoi figli sono state eseguite.

Solo per dare un po 'di chiarezza, l'obiettivo qui è quello di rendere più semplice per i nostri integratori (membri del team CSS/HTML) di aggiungere funzionalità dinamiche agli elementi semplicemente taggandoli con una funzione. Attualmente lo fanno tramite un attributo data-features. Ad esempio, per un dispositivo di scorrimento delle immagini è possibile che taggano un UL con un attributo data-features="imageSlider" per rendere questo UL un dispositivo di scorrimento.

Lungo queste linee, sto lavorando per spostare il modulo di scorrimento dell'immagine su angolare. Voglio che i miei integratori per essere in grado di scrivere qualcosa di simile:

<ul image-slider> 
    <li slide> 
     My Slide 1 
    </li> 
    <li slide> 
     My Slide 2 
    </li> 
    <li slide> 
     My Slide 3 
    </li> 
</ul> 

E posso trasformarla in un dispositivo di scorrimento di immagini in modo dinamico. I lavori di cui sopra fine, se il markup simile a questo:

<ul image-slider> 
    <li slide ng-repeat="slide in data.slider.slides"> 
     My Slide {{$index}} 
    </li> 
</ul> 

Poi il ng-repeat non finire prima la direttiva image-slider corre, il che significa che non ho accesso a tutte le diapositive di lavorare la mia magia.

C'è un modo per dire alla direttiva image-slider di attendere che le direttive al suo interno finiscano prima di sparare?

Ho letto le seguenti domande già:

• Directive that run after ng-repeat
• Angularjs custom directive highlight text after ng repeat has run
• Running parent directives after children directives

Nessuno di questi sembrano avere una risposta a questo problema così ho pensato che avrei messo insieme una domanda molto più succinta nella speranza di trovare una risposta.

Answer 1

Quindi il modo più semplice per farlo è utilizzare directive to directive communication tra la direttiva diapositiva e la direttiva slider dell'immagine. Ecco cosa fai:

app.directive("imageSlider", [ '$log', function($log) { 
    return { 
     scope: { 
     }, 
     controller: function($scope) { 

      $scope.slides = []; 

      // this is a normal controller method that is NOT exposed to other directives 
      $scope.startGallery = function() { 
      }; 

      // this method will be exposed to directives that require imageSlider 
      this.addSlide = function(slide) { 
       $scope.slides.push(slide); 
      } 
     } 
    }; 
} ]); 


app.directive('slide', [ '$log', function($log) { 
    return { 
     require: "^imageSlider", 
     link: function($scope, elem, attribs, ctrls) { 
      ctrls.addSlide($scope); 
     } 
    }; 
} ]); 

In questo modo imageSlider può fornire una diapositiva un'interfaccia per comunicare. Notare la differenza in this.functionName vs $ scope.functionName. Il primo è un modo per esporre i metodi ad altre direttive.

Answer 2

Suggerisco un approccio molto più semplice. Utilizzare la funzione $timeout. Se si imposta il $timeout a zero, verrà eseguito esattamente dopo tutto quello che ha funzionato:

app.directive("imageSlider", [ '$timeout', function($timeout) { 
    return function(scope, element, attrs) 
    { 
     // your data is defined in scope.data.slider.slides 

     $timeout(function() 
     { 
      // This code will run whenever the page has finished processing 
      // So it will run after ng-repeat has finished 
     }, 0); 
    } 
}]);