Les deux sens de la liaison de données dans les Directives AngularJS
J'ai essayé de définir des directives afin que je puisse afficher différentes "widgets" dans un formulaire, en fonction du type de terrain et de ses paramètres, qui sont stockés dans une base de données. J'ai besoin de réagir à différents types de scénarios, d'où la nécessité de directives pour la poignée de mise en page.
Tout en jouant avec quelques exemples, je suis venu avec un code *un peu* travaux:
HTML
<input type="text" ng-model="myModel" style="width: 90%"/>
<div class="zippy" zippy-title="myModel"></div>
Directive
myApp.directive('zippy', function(){
return {
restrict: 'C',
//This HTML will replace the zippy directive.
transclude: true,
scope: { title:'=zippyTitle' },
template: '<input type="text" value="{{title}}"style="width: 90%"/>',
//The linking function will add behavior to the template
link: function(scope, element, attrs) {
//Title element
element.bind('blur keyup change', function() {
scope.$apply(read);
});
var input = element.children();
function read() {
scope.title = input.val();
}
}
}
});
Cela semble œuvres (quoique beaucoup plus lent qu'un *bon* angularJS variable de liaison) mais je suppose que il doit y avoir une meilleure façon de le faire. Quelqu'un peut jeter quelque lumière sur la question?
- Juste curieux, je sais que vous n'avez pas besoin d'appeler $s'appliquent manuellement, mais pourquoi étiez-vous contraignant à la fois
blur
etchange
? N'est-ce pas un pléonasme? Si non, je serais curieux de savoir ce que la différence est juste à l'aide dekeyup blur
. blur
etchange
sont différents, mais je crois que pour des raisons pratiques,keyup
etchange
sont fonctionnellement similaires. La seule diference serait que si j'ai changé l'entrée de la valeur de la programmation, à l'aide dechange
serait le déclenchement d'un événement (l'entrée de données de la changer), alors qu'en laissantchange
allait faire un tel changement invisible, sauf si elle provient d'une combinaison de touches. Gardez à l'esprit que c'était "âges" auparavant, je n'avais aucune idée de ce que je faisais avec le génial bête qui est angularJS 😉
Vous devez vous connecter pour publier un commentaire.
Je ne sais pas pourquoi vous êtes le déclenchement de la
$apply
méthode manuellement car vous n'en avez pas besoin.J'ai édité l'exemple que vous avez utilisé à partir de l'angle de la page et inclus l'entrée.
Il fonctionne pour moi: http://jsfiddle.net/6HcGS/2/
HTML
JS
Mise à JOUR
maxisam est droit, vous devez utiliser
ng-model
au lieu de la liaison de la variable par rapport à la valeur de la sorte:Ici est la version de travail: http://jsfiddle.net/6HcGS/3/
Vous voulez dire quelque chose comme cette ?
J'utilise essentiellement @Flek l'exemple.
La seule différence étant
ng-model='title'
Le truc pour faire la liaison bidirectionnelle est ng-model, et il est dit dans la document:
Voici un moyen de passer pour un rappel de paramètre dans une directive. Le modèle du contrôleur:
La directive:
Dans le contrôleur:
Notez la différence dans les paramètres de la fonction de la directive (un objet avec le paramètre que les clés), modèle ('déballé" clés " à partir du paramètre de l'objet dans la directive), de contrôleur et de définition.