Qu'est-ce que ng-transclude?

266

J'ai vu un certain nombre de questions sur StackOverflow discutant de ng-transclude, mais aucune expliquant en termes simples ce que c'est.

La description dans la documentation est la suivante:

Directive qui marque le point d'insertion pour le DOM transclus de la directive parent la plus proche qui utilise la transclusion.

C'est assez déroutant. Quelqu'un pourrait-il expliquer en termes simples ce que ng-transclude est censé faire et où il pourrait être utilisé?

angularjs angularjs-directive transclusion

— Code Whisperer
source

c'est essentiellement un point de marquage pour tout ce que vous insérez pour la balise html ou la directive particulière. utilisez-le avec une directive et vous le comprendrez mieux.

— za

Réponses:

492

Transclude est un paramètre qui indique à angular de capturer tout ce qui est placé à l'intérieur de la directive dans le balisage et de l'utiliser quelque part _{(où se trouve réellement le ng-transclude)} dans le modèle de la directive. Pour en savoir plus, consultez la section Création d'une directive qui enveloppe d'autres éléments de la documentation des directives .

Si vous écrivez une directive personnalisée, vous utilisez ng-transclude dans le modèle de directive pour marquer le point où vous souhaitez insérer le contenu de l'élément

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

Si vous mettez cela dans votre balisage

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

Cela se présenterait comme:

Superman

Contenu de la directive personnalisée

Exemple complet:

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

Visualisez:

— Ben Fischer
source

C'est une bien meilleure description que leurs documents officiels. Celui-là me fait mal à la tête.

— Capaj

Très bonne réponse! :) Le lien que vous avez partagé m'aide à comprendre le processus transclude.

— Paulo Oliveira

Angular devrait utiliser cette explication au lieu des documents dont ils disposent actuellement.

— Jeremy W

@codeofnode son service de compilation angulaire, voici le code pertinent github.com/angular/angular.js/blob/…

— Ben Fischer

Les réponses Stackoverflow sont le meilleur moyen de sous

— estimer les

c'est une sorte de rendement, tout à partir de element.html () y est rendu mais les attributs de la directive sont toujours visibles dans une certaine portée.

— Sîrbu Nicolae-Cezar
source

La meilleure réponse que je pense est parfaite, mais si vous venez d'un fond rubis, je suis d'accord, cela yieldsemble être une bonne analogie.

— Apie

@Apie oui, je viens d'un fond rubis

— Sîrbu Nicolae-Cezar