Comprendre l'option transclude de la définition de directive?
je pense que c'est l'un des concepts les plus difficiles à comprendre pour moi avec la directive angularjs.
le document de http://docs.angularjs.org/guide/directive dit:
transclude - compiler le contenu de l'élément et le mettre à la disposition de la directive. Généralement utilisé avec ngTransclude. L'avantage de la transclusion est que la fonction de liaison reçoit un fonction de transclusion qui est pré-liée à la portée correcte. Dans une configuration typique, le widget crée un champ isolat, mais la transclusion n'est pas un enfant, mais un frère du champ isolat. Cela permet au widget d'avoir l'état privé, et la transclusion d'être liée à la portée parent (pre-isolate).
- vrai - transclude le contenu de la directive.
- "élément" - transclude l'ensemble de l'élément, y compris toute directive définie à un niveau de priorité inférieur.
Il dit: transclude généralement utilisé avec ngTransclude . Mais l'échantillon du doc de ngTransclude n'utilise pas du tout la directive ngTransclude .
j'aimerais de bons exemples pour m'aider à comprendre cela. Pourquoi avons-nous besoin? Ce qui permet-il de résoudre? Comment l'utiliser?
6 réponses
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 utilise un modèle, vous verrez que le contenu de <div my-directive> sera remplacé par votre modèle de directive. Ainsi,
app.directive('myDirective', function(){
return{
template: '<div class="something"> This is my directive content</div>'
}
});
résultera en ce Rendu:
<div class="something"> This is my directive content</div>
notez que le contenu de votre élément original <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 faire si vous voulez garder votre <button>... et <a href>... dans le DOM? Vous aurez besoin de quelque chose appelé la transclusion. Le concept est assez simple: inclure le contenu d'un endroit dans un autre . Donc maintenant votre directive ressemblera à quelque chose comme ceci:
app.directive('myDirective', function(){
return{
transclude: true,
template: '<div class="something"> This is my directive content</div> <ng-transclude></ng-transclude>'
}
});
Ce serait rendre:
<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 voulez préserver le contenu d'un élément lorsque vous utilisez une directive.
mon exemple de code est ici http://jsfiddle.net/7LRDS/1 / Vous pourriez également bénéficier de regarder: https://egghead.io/lessons/angularjs-transclusion-basics
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 Angulaire 1.2.10.
le contenu de l'élément avec ng-transclude n'est pas ajouté mais complètement remplacé.
Ainsi, 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 non
<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 étiquette de conteneur simple (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, transclusion est l'inclusion de tout ou partie de un document électronique dans un ou plusieurs autres documents par référence."
j'aimerais ajouter une autre utilisation pour la transclusion, et c'est qu'elle change l'ordre d'exécution des fonctions de compilation et de lien des directives parent et enfant. Cela peut être utile lorsque vous voulez compiler le DOM enfant avant le DOM parent comme le parent DOM dépend peut-être de L'enfant DOM. Cet article va plus en profondeur et le clarifie très bien!
Le mise à Jour AngularJS 1.6.6 documentation 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 dans un modèle entier plutôt qu'une chaîne ou un objet. Disons que nous voulons créer une boîte de dialogue "composant". La boîte de dialogue doit pouvoir envelopper n'importe quel contenu arbitraire.
pour ce faire, nous devons utiliser l'option transclude . Reportez-vous à l'exemple ci-dessous.
"151950920 de 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';
}
};
});
de l'index.html
<div ng-controller="Controller">
<my-dialog>Check out the contents, {{name}}!</my-dialog>
</div>
mon-boîte de dialogue.html
<div class="alert" ng-transclude></div>
Compilé Une Sortie
<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 rend le contenu d'une directive avec cette option avoir accès au champ d'application 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 comme Jeff. Normalement, on s'attendrait à ce que ce soit Jeff. Cependant, nous voyons dans cet exemple que la liaison {{nom}} est toujours Tobias.
meilleure pratique : n'utilisez transclude: true que si vous voulez créer une directive cela enveloppe le contenu arbitraire.
transclude:vrai moyen d'ajouter tout élément qui est défini dans la directive avec l'élément de modèle de votre directive.
si transclude:false, ces éléments ne sont pas inclus dans la version finale du code html de directive que le modèle de la directive est rendu.
transclude:élément de votre directive modèle n'est pas utilisé seul élément défini dans votre directive sont rendus en html.
lorsque vous définissez votre directive, il devrait être limité à E et quand vous l'ajoutez sur la page puis
<my-directive><elements><my-directive>
<elements> is like <p>gratitude</p>
what i am talking about.