Comment passer HTML angulaire de la directive?
Je suis en train de créer un angulaire de la directive avec un modèle, mais je ne veux pas perdre le code HTML à l'intérieur de la div. Par exemple, voici comment je voudrais appeler mon directive de HTML:
<div my-dir>
<div class="contents-i-want-to-keep"></div>
</div>
Puis, il y a mon directive:
app.directive('myDir', [ '$compile', function($compile) {
return {
restrict: 'E',
link: function(scope, iElement, iAttrs){
//assigning things from iAttrs to scope goes here
},
scope: '@',
replace: false,
templateUrl: 'myDir.html'
};
}]);
et puis il y a myDir.html, où-je définir un nouvel élément:
<div class="example" style="background: blue; height: 30px; width: 30px"></div>
Même si je la remplacer pour de faux, je perds l'intérieur matières-i-want-to-garder div - ma compréhension de l'angle de docs est que cela devrait être ajouté après mon modèle. Est-il un moyen de préserver ce (éventuellement par le biais de ma fonction de liaison?) de sorte que le résultat sera
<div class="example" style="background: blue; height: 30px; width: 30px">
<div class="contents-i-want-to-keep"></div>
</div>
Merci!
- que vous avez à faire translude:vrai et l'utilisation ng-transclude de garder intérieure div
- Merci!!!!
Vous devez vous connecter pour publier un commentaire.
Vous aurez besoin d'utiliser
ng-transclude
, ajoutertransclude: true
dans votre directive options, et ajouterng-transclude
à votre modèle:Ce plunkr a un exemple sur la façon d'utiliser ng-transclude avec un modèle, de conserver l'original de l'élément dom.
http://plnkr.co/edit/efyAiTmcKjnhRZMTlNGf
1.3.4
. N'hésitez pas à essayer le plunkr avec la dernière angulaire de la version et de voir.transclude
fait quelque chose d'étrange avecscope
: "transclude rend le contenu d'une directive à cette option ont accès à la portée à l'extérieur de la directive plutôt qu'à l'intérieur." (à partir de docs.angularjs.org/guide/directive). Ainsi, peut-réglagetransclude: true
ont des effets secondaires, en plus il suffit de me laisser utiliser la directive interne du html?Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template!