Comment comprendre le `transclude` de la définition de directive?

Question

Je pense que c'est l'un des plus difficiles pour moi, le concept de comprendre avec angularjs de la directive.

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

transclude - compiler le contenu de l'élément et de le rendre disponible à la directive. Généralement utilisé avec ngTransclude. L'avantage de la transclusion est que la fonction de liaison reçoit une transclusion d'une fonction qui est pré-lié à la bonne portée. Dans une installation par défaut, le widget crée un isolat de la portée, mais la transclusion n'est pas un enfant, mais un frère ou une sœur de l'isoler de la portée. Cela rend possible pour le widget pour l'avoir privé de l'état, et la transclusion d'être lié à la société mère (pré-isolé).

• vrai - transclude le contenu de la directive.
• "élément" - transclude l'ensemble de l'élément, y compris toutes les directives définies à priorité inférieure.

Il dit transclude généralement utilisé avec ngTransclude. Mais l'exemple de la doc de ngTransclude ne pas utiliser ngTransclude directive à tous.

J'aimerais avoir quelques bons exemples pour m'aider à comprendre cela. Pourquoi avons-nous besoin? Ce qui permet-il de résoudre? Comment l'utiliser?

Answer 1

Envisager une directive appelée myDirective dans un élément, et cet élément est en joignant un autre type de contenu, disons:

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

Si myDirective est à l'aide d'un modèle, vous allez voir que le contenu de <div my-directive> sera remplacé par votre directive modèle. Afin d'avoir:

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

entraînera dans 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é). Donc, dire au revoir à ces potes:

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

Alors, que faire si vous voulez garder votre <button>... et <a href>... dans les 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 devrait ressembler à quelque chose comme ceci:

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

Ce serait rendre:

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

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

Mon exemple de code est ici http://jsfiddle.net/7LRDS/1/ Vous pouvez également bénéficier de regarder: http://egghead.io/video/angularjs-transclusion-basics/

Answer 2

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'atteindre 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.