Comprendre l'option transclude de la définition de directive?

Je pense que c'est l'un des concepts les plus difficiles à comprendre avec la directive angularjs.

Le document de http://docs.angularjs.org/guide/directive dit:

transclude - compile le contenu de l'élément et le met à la disposition de la directive. Généralement utilisé avec ngTransclude. L'avantage de la transclusion est que la fonction de liaison reçoit une fonction de transclusion qui est pré-liée à la portée correcte. Dans une configuration typique, le widget crée une portée isolée, mais la transclusion n'est pas un enfant, mais un frère de la portée isolée. Cela permet au widget d'avoir un état privé et la transclusion d'être liée à la portée parent (pré-isolée).

• true - transclut le contenu de la directive.
• 'élément' - transclut l'élément entier, y compris toutes les directives définies à une priorité inférieure.

Il dit transcludegénéralement utilisé avec ngTransclude. Mais l'exemple du doc ​​de ngTransclude n'utilise pas du tout de ngTranscludedirective.

J'aimerais avoir de bons exemples pour m'aider à comprendre cela. Pourquoi en avons-nous besoin? Que résout-il? Comment l'utiliser?

Considérons une directive appelée myDirective dans un élément, et cet élément contient un autre contenu, disons:

<div my-directive>
    <button>some button</button>
    <a href="#">and a link</a>
</div>

Si myDirective utilise un modèle, vous verrez que le contenu de <div my-directive>sera remplacé par votre modèle de directive. Ayant donc:

app.directive('myDirective', function(){
    return{
        template: '<div class="something"> This is my directive content</div>'
    }
});

entraînera ce rendu:

<div class="something"> This is my directive content</div> 

Notez que le contenu de votre élément d'origine <div my-directive> sera perdu (ou mieux dit, remplacé). Alors, dites au revoir à ces copains:

<button>some button</button>
<a href="#">and a link</a>

Alors, que se passe-t-il si vous souhaitez conserver votre <button>...et <a href>...dans le DOM? Vous aurez besoin de quelque chose appelé transclusion. Le concept est assez simple: inclure le contenu d'un endroit à un autre . Alors maintenant, votre directive ressemblera à ceci:

app.directive('myDirective', function(){
    return{
        transclude: true,
        template: '<div class="something"> This is my directive content</div> <ng-transclude></ng-transclude>'
    }
});

Cela rendrait:

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>. 

En conclusion, vous utilisez essentiellement transclude lorsque vous souhaitez conserver le contenu d'un élément lorsque vous utilisez une directive.

Mon exemple de code est ici . Vous pourriez également bénéficier de regarder cela .

Je pense qu'il est important de mentionner les changements dans le comportement ci-dessus dans la nouvelle version d'AngularJS. J'ai passé une heure à essayer d'obtenir les résultats ci-dessus avec Angular 1.2.10.

Le contenu de l'élément avec ng-transclude n'est pas ajouté mais complètement remplacé.

Donc, dans l'exemple ci-dessus, ce que vous obtiendriez avec «transclude» serait:

<div class="something">
    <button>some button</button>
    <a href="#">and a link</a>
</div>

et pas

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>

Merci.

Ce que TechExplorer dit est vrai, mais vous pouvez avoir les deux contenus en incluant dans votre modèle une simple balise conteneur (comme div ou span) avec l'attribut ng-transclude. Cela signifie que le code suivant dans votre modèle doit inclure tout le contenu

<div class="something"> This is my directive content <div class="something" ng-transclude></div></div>

De Wiki:

"En informatique, la transclusion est l'inclusion d'une partie ou de la totalité d'un document électronique dans un ou plusieurs autres documents par référence."

Je voudrais ajouter une autre utilisation pour la transclusion, c'est qu'elle change l'ordre d'exécution des fonctions de compilation et de liaison des directives parent et enfant. Cela peut être utile lorsque vous souhaitez compiler le DOM enfant avant le DOM parent, car le DOM parent dépend peut-être du DOM enfant. Cet article va plus en profondeur et le clarifie très bien!

http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives-part-2-transclusion/

La documentation mise à jour AngularJS 1.6.6 a maintenant une meilleure explication.

Transclude est utilisé pour créer une directive qui enveloppe d'autres éléments

Parfois, il est souhaitable de pouvoir passer un modèle entier plutôt qu'une chaîne ou un objet. Disons que nous voulons créer un composant "boîte de dialogue". La boîte de dialogue doit pouvoir encapsuler tout contenu arbitraire.

Pour ce faire, nous devons utiliser l' option transclude . Reportez-vous à l'exemple ci-dessous.

script.js

angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.name = 'Tobias';
}])
.directive('myDialog', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    templateUrl: 'my-dialog.html',
    link: function(scope) {
      scope.name = 'Jeff';
    }
  };
});

index.html

<div ng-controller="Controller">
  <my-dialog>Check out the contents, {{name}}!</my-dialog>
</div>

my-dialog.html

<div class="alert" ng-transclude></div>

Sortie compilée

<div ng-controller="Controller" class="ng-scope">
  <my-dialog class="ng-isolate-scope"><div class="alert" ng-transclude="">Check out the contents, Tobias!</div></my-dialog>
</div>

Transclude permet au contenu d'une directive avec cette option d'avoir accès à la portée en dehors de la directive plutôt qu'à l'intérieur.

Ceci est illustré dans l'exemple précédent. Notez que nous avons ajouté une fonction de lien dans script.js qui redéfinit le nom en Jeff. Normalement, nous nous attendrions à ce que {{name}} soit Jeff. Cependant, nous voyons dans cet exemple que la liaison {{name}} est toujours Tobias.

Meilleure pratique : utilisez uniquement transclude: truelorsque vous souhaitez créer une directive qui encapsule un contenu arbitraire.

transclude: true signifie ajouter tous les éléments définis dans votre directive avec l'élément de modèle de votre directive.

si transclude: false les ces éléments ne sont pas inclus dans votre html final de directive seul le modèle de directive est rendu.

transclude: élément signifie que votre modèle de directive n'est pas utilisé, seuls les éléments définis dans votre directive sont rendus en html.

lorsque vous définissez votre directive, elle doit être limitée à E et lorsque vous l'ajoutez à la page,

<my-directive><elements><my-directive>
<elements> is like <p>gratitude</p>
what i am talking about.