Che cos'è ng-transclude?

266

Ho visto una serie di domande su StackOverflow che discutono di ng-transclude, ma nessuna che spiega in parole povere di cosa si tratta.

La descrizione nella documentazione è la seguente:

Direttiva che segna il punto di inserimento per il DOM escluso della direttiva principale più vicina che utilizza la inclusione.

Questo è abbastanza confuso. Qualcuno sarebbe in grado di spiegare in termini semplici cosa ng-transclude è destinato a fare e dove potrebbe essere utilizzato?

angularjs angularjs-directive transclusion

— Whisperer di codice
fonte

è fondamentalmente un punto di marcatura per qualsiasi cosa tu stia inserendo per il particolare tag html o direttiva. usalo con una direttiva e lo capirai meglio.

— za

Risposte:

492

Transclude è un'impostazione per dire a Angular di catturare tutto ciò che è inserito nella direttiva nel markup e usarlo da qualche parte _{(dove effettivamente si ng-transcludetrova)} nel modello della direttiva. Maggiori informazioni in merito alla sezione Creazione di una direttiva che avvolge la sezione Altri elementi sulla documentazione delle direttive .

Se si scrive una direttiva personalizzata, si utilizza ng-transclude nel modello di direttiva per contrassegnare il punto in cui si desidera inserire il contenuto dell'elemento

angular.module('app', [])
  .directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

Se lo metti nel markup

<hero name="superman">Stuff inside the custom directive</hero>

Si presenterebbe come:

Superuomo

Roba all'interno della direttiva personalizzata

Esempio completo:

Index.html

<body ng-app="myApp">
  <div class="AAA">
   <hero name="superman">Stuff inside the custom directive</hero>
</div>
</body>

jscript.js

angular.module('myApp', []).directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

Output markup

Visualizza:

— Ben Fischer
fonte

Questa è una descrizione molto migliore rispetto ai loro documenti ufficiali. Quello mi fa male alla testa.

— Capaj,

Bella risposta! :) Il link che hai condiviso mi aiuta a capire il processo di transclude.

— Paulo Oliveira,

Angular dovrebbe usare questa spiegazione invece dei documenti che ha attualmente.

— Jeremy W,

@codeofnode il servizio di compilazione di angular, ecco il codice pertinente github.com/angular/angular.js/blob/…

— Ben Fischer

Le risposte di StackOverflow sono il modo migliore per

— sottovalutare i

è una specie di resa, tutto da element.html () viene reso lì, ma gli attributi della direttiva sono ancora visibili in un determinato ambito.

— Sîrbu Nicolae-Cezar
fonte

La risposta migliore che ritengo sia perfetta, ma se vieni da uno sfondo rubino, sono d'accordo, yieldsembra una buona analogia.

— Apie,

@Apie sì, vengo da uno sfondo rubino

— Sîrbu Nicolae-Cezar