AngularJS directives attributs de l'accès à partir du contrôleur de
Je suis en train d'accéder aux attributs d'une directive de la fonction de contrôleur. Toutefois, le temps que j'y accéder, il n'est pas défini. J'ai remarqué que si je fais un simple timer, il fonctionne. Est-il un moyen d'exécuter du code seulement après la directive et les étendues sont prêts et prêt à être utilisé?
J'ai fait du violon avec elle. Assurez-vous que votre console est ouverte. http://jsfiddle.net/paulocoelho/uKA2L/1/
Voici le code que j'utilisais pour le violon:
<div ng-app="testApp" >
<testcomponent text="hello!"></testcomponent>
</div>
var module = angular.module('testApp', [])
.directive('testcomponent', function () {
return {
restrict: 'E',
template: '<div><p>{{text}} This will run fine! </p></div>',
scope: {
text: '@text'
},
controller: function ($scope, $element) {
console.log($scope.text); //this will return undefined
setTimeout(function () {
console.log($scope.text); //this will return the actual value...
}, 1000);
},
link: function ($scope, $element, $attrs) {
console.log($scope.text);
setTimeout(function () {
console.log($scope.text);
}, 1000);
}
};
});
Vous devez vous connecter pour publier un commentaire.
Ce qui fonctionne est, si vous définissez
à l'intérieur de la liaison et les fonctions de la manette. Cela ne fonctionnera d'abord, comme il n'y a pas de 2way - la liaison de données. Vous pouvez utiliser $attrs.observer bien.
Voir violon: http://jsfiddle.net/JohannesJo/nm3FL/2/
attrs.text
est inconnue.@param {string} attrs.text
devrait résoudre votre problème.Isolés champ, un champ d'application bien défini par " @ " ne peut pas être consulté dans la fonction de liaison. Comme @remigio déjà mentionné, ces propriétés de l'étendue sont
undefined
à ce point. $attrs.$observer() ou $scope.$watch() doit être utilisé de manière asynchrone obtenir l' (interpolée) valeur.Si vous êtes de passage à une valeur constante de l'attribut, (c'est à dire, pas d'interpolation nécessaire, c'est à dire, la valeur de l'attribut ne contient pas toutes les {{}}s) il n'y a pas besoin de '@' ou $observateur ou $watch. Vous pouvez utiliser $attrs.attribute_name une fois que @hugo suggère, ou si vous êtes de passage à un nombre ou une valeur booléenne et vous souhaitez obtenir le bon type, vous pouvez utiliser $scope.$eval($attrs.attribute_name) une fois.
Si vous utilisez '=' pour databind une portée locale de la propriété d'un parent champ d'application de la propriété, la valeur de la propriété sera disponible dans la fonction de liaison (pas besoin de $observer$, ou de regarder ou $eval).
Depuis Angulaire 1.3, vous pouvez utiliser
bindToController
. Voici un exemple sur la façon dont je l'utilise. Ici, j'ai ajouter l'attribut de l'étendue et ensuite utiliserbindToController
à utiliser qu'à l'intérieur du contrôleur:text
lors de l'appel de la directive de ce genre?<testcomponent text="hello!"></testcomponent>
Au lieu d'utiliser
$scope
pour obtenir directive sur les attributs de la valeur, personnellement, je préfère utiliser$attrs
pour lacontroller
fonction, ou tout simplementattrs
au 3ème paramètre de lalink
fonction. Je n'ai aucun problème lorsque obtenir les attributs de la valeur à partir d'uncontroller
par le code suivant sans délai d'attente :La fonction de lien est appelé avant l' $digest boucle, à ce moment de la portée des variables ne sont pas définies. Regardez ce chapitre et cette autre de comprendre comment le lien fonctionne. Vous utilisez uniquement la fonction de lien de définir les montres et/ou comportements de la directive, ne pas manipuler le modèle, ce qui est fait dans les contrôleurs.
Si vous accédez à cette valeur à partir de votre directive pour l'insérer dans votre point de vue à l'aide d'une directive, vous pouvez accéder à cet attribut à l'aide de la compilation de l'api et de faire quelque chose comme ce