L'imbrication des directives dans les directives
Concernant les directives AngularJS j'ai couru dans une situation où je suis à l'appel d'une directive à partir d'une autre directive, et j'ai les questions suivantes.
- Pourquoi ne puis-je pas referecne portée.bindValue dans ma fonction de lien? Est il possible que je peux calculer une valeur de champ d'application.bindValue et définir son champ d'application?
- Pourquoi le subdirective lier à l'aide d'un "@" dans le champ d'application:{} mais pas de portée d'utilisation.valeur = attrs.la valeur de la fonction de lien?
Tous les ci-dessous peut être vu à http://jsfiddle.net/sdg9/AjDtt/13/
HTML:
<directive bind-value="12" value="7"></directive>
JS:
var myApp = angular.module('myApp', []);
var commonTemplate = '<div>{{name}} bind-value is: {{bindValue}} </div><div>{{name}} value is: {{value}} </div><div>{{name}} add one to bind-value is: {{addOneBindValue}} </div><div>{{name}} add one to value is: {{addOneValue}} </div><br/>';
myApp.directive('directive', function () {
return {
scope: {
bindValue: "@",
},
template: commonTemplate + '<br/><sub-directive bind-value="{{value}}" value="{{value}}"></sub-directive>',
restrict: 'E',
link: function (scope, element, attrs) {
scope.name = "Directive";
scope.value = attrs.value;
scope.addOneBindValue = parseInt(scope.bindValue) + 1;
scope.addOneValue = parseInt(scope.value) + 1;
}
};
});
myApp.directive('subDirective', function () {
return {
scope: {
bindValue: "@"
},
template: commonTemplate,
restrict: 'E',
link: function (scope, element, attrs) {
scope.name = "SubDirective";
scope.value = attrs.value;
scope.addOneBindValue = parseInt(scope.bindValue) + 1;
scope.addOneValue = parseInt(scope.value) + 1;
}
};
});
De sortie:
Directive bind-value is: 12
Directive value is: 7
Directive add one to bind-value is: null <--- why?
Directive add one to value is: 8
SubDirective bind-value is: 7
SubDirective value is: <--- why?
SubDirective add one to bind-value is: null
SubDirective add one to value is: null
OriginalL'auteur Steven | 2013-03-15
Vous devez vous connecter pour publier un commentaire.
Interpolées attributs (c'est à dire, les attributs d'utiliser {{}}s) et d'isoler les propriétés de l'étendue définie par " @ " ne sont pas disponibles lorsque la fonction de lien fonctionne. Vous avez besoin d'utiliser
attrs.$observe()
(ouscope.$watch( @ property here, ...)
) pour obtenir les valeurs (de manière asynchrone).Donc,
scope.bindValue
n'est pas disponible lorsque vous essayez de l'utiliser.De la même façon, dans votre subDirective, attribut
value
a {{}}s, de sorte que sa valeur ne sera pas disponible lorsque vous essayez de l'utiliser. Vous devez également définir un '@' directive propriété.De travail violon.
La raison de l'asynchrone exigence est que les éléments à l'intérieur de la {{}}s peuvent changer, et vous voulez que votre directive avis (et puis faire quelque chose-comme la mise à jour de la "addOne" valeurs). le caractère " @ " est normalement utilisé avec d'isoler les étendues lorsque la valeur de l'attribut contient {{}}s.
Si les valeurs d'attribut sont des constantes, et vous n'allez pas utiliser les valeurs d'un modèle (ou templateUrl), puis '@' ne devrait probablement pas être utilisé. Dans la fonction de lien, il suffit d'utiliser
attrs.attrName
si la valeur est une chaîne, ouscope.$eval(attrs.attrName)
si l'attribut est un nombre ou une valeur booléenne (ouparseInt(attrs.attrName)
si vous savez que c'est un nombre).J'ai été la création d'un violon en même temps que vous 🙂 Dans mon violon, je montre aussi comment obtenir
value
dans le subDirective. J'ai aussi mis ma réponse avec quelques infos.concernant "Si les valeurs d'attribut sont des constantes, '@' ne devrait probablement pas être utilisé" quand je suis à la nidification des directives? Mon ultrapériphériques directive peut ressembler <directive value="7"></directive> mais puisque c'est à l'aide d'un templateURL c'est l'appel de mon sous directive par une interpolation de l'attribut. Est-ce la bonne utilisation de templateURL ou devrais-je être la construction de l'élément de moi-même via angulaire.élément et les ajouter dans le template? Le plus tard, se sent comme beaucoup de travail supplémentaire pour moi d'éviter interpolées attributs.
OriginalL'auteur Mark Rajcok