AngularJS: funzioni di compilazione e collegamento di ng-repeat

Question

Sto cercando di capire la differenza tra la funzione di compilazione e quella di collegamento. Nella documentazione angolare per the compiler è

Alcune direttive come gli elementi DOM di clonazione ripetuta ng una volta per ogni elemento di una raccolta. Avere una fase di compilazione e collegamento migliora le prestazioni dal momento che il modello clonato deve essere compilato solo una volta e quindi collegato una volta per ogni istanza di clone.

ho guardato la source code per cercare di capire come funziona e non ottengo come si crea una funzione di collegamento separato per ogni istanza clonato. Per me sembra che la funzione compile restituisca una funzione di collegamento per la direttiva ng-repeat. Questa funzione di collegamento crea un nuovo ambito per ciascun elemento nella ripetizione ng, ma non fornisce ad ogni istanza clonata una funzione di collegamento separata.

Answer 1

Una cosa che può essere fonte di confusione sulla loro descrizione è che stanno cercando di discutere l'idea di una direttiva all'interno di un <ng-repeat> invece di discutere di <ng-repeat> stesso.

L'idea è che anche se si dispone di più istanze di una particolare direttiva (ad esempio perché si trovano all'interno di un <ng-repeat>) la funzione di compilazione viene eseguita una sola volta per la durata della propria app. Pertanto, il vantaggio in termini di prestazioni di inserire il codice qui è che viene eseguito solo una volta. E questo è anche il potenziale problema. Le sole cose che dovrebbero andare in una funzione di compilazione sono cose che sono comuni a tutte le istanze di quella direttiva.

La funzione di collegamento, d'altra parte, viene eseguita una volta per ogni istanza di tale direttiva (di nuovo, ad esempio, all'interno di un <ng-repeat>).

Quindi è possibile pensare alla funzione di compilazione come impostazione del modello di cosa dovrebbe essere una direttiva di questo tipo, mentre la funzione di collegamento imposta un'istanza reale di tale direttiva. Questo è il motivo per cui la funzione di collegamento ottiene un $ scope passato ad esso e la compilazione non lo fa e perché la funzione di collegamento è quella molto più comunemente usata.

Per una grande discussione di esattamente questo uno degli autori angolare, check out: http://www.youtube.com/watch?v=WqmeI5fZcho&list=TLwY_LmqLDXW_3QKhTNm1zKa9j40TvPO2O (13:42 è dove collegamento indirizzo Misko vs compilare funzioni)

Answer 2

In addtion alla risposta di KayakDave, ecco un semplice implementazione di ng-repeat che non esegue alcuna osservazione della collezione. Il plunker ha una registrazione che mostra la sequenza di eventi e ha anche alcuni esempi che mostrano come funziona la priorità.

Plunker

Link to source question

Javascript:

app.directive('fakeRepeat', function() { 
    return { 
    priority: 1000, 
    terminal: true, 
    transclude: 'element', 
    compile: function(el, attr, linker) { 
     return function(scope, $element, $attr) { 
     angular.forEach(scope.$eval($attr.fakeRepeat).reverse(), function(x) { 
      var child = scope.$new(); 
      child[attr.binding] = x; 
      linker(child, function(clone) { 
      $element.after(clone); 
      }); 
     }); 
     } 
    } 
    } 
});