Angular js Imbrication des directives sur mesure
Je veux utiliser quelque chose comme imbrication des directives sur mesure en angular js. Quelqu'un pourrait-il m'expliquer avec la solution la plus simple ?
exemple de code est ci-dessous ne fonctionne pas pour moi :
<outer>
<inner></inner>
</outer>
JS
var app = angular.module('app',[]);
app.directive('outer',function(){
return{
restrict:'E',
template:'<div><h1>i am a outer</h1></div>',
compile : function(elem,attr){
return function(scope,elem,att,outercontrol){
outercontrol.addItem(1);
}
},
controller : function($scope){
this.addItem = function(val){
console.log(val);
}
}
}
});
app.directive('inner',function(){
return{
require : 'outer',
template : '<div><h1>i am a inner</h1></div>',
link:function(scope,elem,attr){
}
}
});
- Vous pouvez le faire, mais quel est le problème?
- Vous devez utiliser la transclusion. docs.angularjs.org/api/ng/directive/ngTransclude
- Oui bien-sûr, nous pouvons le faire dans angulaire, je veux savoir pourquoi on n'a pas de travail pour moi. Est-il quelque chose de mal dans le code. J'ai essayé transclude de vrai. Il n'a pas travaillé.
- quelles erreurs avez-vous?
- je ne reçois pas toutes les erreurs. Il que le rendu extérieur de la directive. Je veux le rendre à l'extérieur et l'intérieur de la directive genre de nidification. Vérifier mon code.
Vous devez vous connecter pour publier un commentaire.
D'abord ajouter
restrict:'E'
à l'intérieur du contrôleur pour le rendre accessible comme un élément.Puis changer le
require : 'outer'
enrequire : '^outer',
pour permettre à la recherche de cette directive dans les parents.Alors vous devez utiliser transclude pour activer le contenu de la
<outer>
être considéré, par les étapes suivantes:transclude = true
à l'extérieur de la directive.template:'<div><h1>i am a outer</h1><div ng-transclude></div></div>'
).Alors vous n'avez pas besoin de le compiler tout de paramètre.
Comme cette variable qui appelle outercontrol ne sera pas appelé à l'extérieur de la directive, mais à l'intérieur, la directive n'est donc pas besoin de le compiler à l'extérieur de la directive et à l'intérieure de la fonction de lien sera modifié pour être comme ceci:
après tout, cette modification du code final sera comme suit:
la HTML:
la js:
Si vous voulez une solution simple, découvrez cette plunkr.
JS:
HTML:
Le problème, c'est que vous êtes à la destruction de la balise avec l'attribut de modèle de la directive. Cette ligne:
Fait.