web-dev-qa-db-fra.com

angularjs - ng-switch ne lie pas le modèle ng

J'ai cette repro http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq qui s'affiche lorsque je clique sur 'Title3' et saisis une valeur dans la zone de texte bien que la valeur entrée s'affiche reflétée dans l'interface utilisateur, lorsque je clique sur le bouton "cliquer" rien n'est lié pour l'attribut de portée $ scope.test.

Je ne sais pas ce qui ne va pas avec ng-switch ou peut-être que je fais quelque chose de mal. L'aide est appréciée !!!

http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq

angularjsng-switch
46
user1791567

Il s'agit d'un problème d'héritage de portée dû à ng-switch créant sa propre portée.

Une recommandation souvent faite est toujours d'utiliser un dot sur les modèles. La raison en est que lorsque l'élément d'étendue du contrôleur est un objet et non une primitive, les sous-étendues créent une référence à l'objet initial. Si le modèle est une primitive, il ne mettra pas à jour l'original.

Par exemple:

<input ng-model="test.value" placeholder="pre" type="text" />

$scope.test={value:''}

Une autre approche consiste à utiliser $parent dans le balisage du modèle html:

<input ng-model="$parent.test" placeholder="pre" type="text" />

L'utilisation de la méthodologie dot est une bonne pratique pour éviter ces problèmes car vous n'avez pas besoin de penser à des étendues imbriquées plus profondes.

Démo utilisant test.value comme modèle: http://plnkr.co/edit/CkiF55bLXsYzR6ZjcrJp?p=preview

Référence concernant dot dans les modèles (lecture précieuse): https://github.com/angular/angular.js/wiki/Understanding-Scopes

87
charlietfl

C'est parce que vous créez en fait une portée enfant à l'intérieur du ng-switch. Une autre propriété test existe donc sur une étendue appartenant à la directive ngSwitch. Il affichera initialement la valeur de sa portée parent, mais lorsque vous le modifiez, car il s'agit d'une primitive, il ne modifie que la valeur sur l'enfant, pas sur le parent. L'héritage prototypique n'entre pas en jeu ici (mais c'est ce dont nous avons besoin).

Lorsque vous cliquez sur le bouton, le bouton alerte/console.logging la propriété sur la portée parent ... que l'enfant ne peut pas modifier.

Pour résoudre ce problème, utilisez $parent.test sur votre attribut ng-model dans votre ngSwitch:

un extrait:

<span class="pew"  ng-switch-when="title2">
  <input ng-model="$parent.test" placeholder="pre" type="text" />
  {{test}}
</span>

Et voici une fourchette de votre plongeur le montrant en action.

10
Ben Lesh

J'ai rencontré un problème similaire et je l'ai résolu en créant une variable d'étendue dans le contrôleur et en l'utilisant avec dans ng-include et ng-switch. De cette façon, si vous avez profondément imbriqué ng-include est avec dans ng-switch et cela continue, nous pouvons toujours utiliser directement cette variable de portée.

Comme toutes les étendues enfant (ici, ng-include/ng-switch) s'étend de la portée parent (généralement, la portée des contrôleurs), nous pouvons accéder directement à la portée parent à partir de avec dans ces étendues enfants sans problème.

En utilisant $parent nécessitera d'écrire comme $parent.$parent.$parent.someProp

Exemple Plunk:http://plnkr.co/edit/8UGH7nUpFmATiXfkYSwr?p=preview

4
manikanta