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

Question

J'ai cette repro http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq que quand je cliquer sur "Titre3" et entrez une valeur dans la zone de texte bien que la valeur saisie montre reflète dans l'INTERFACE utilisateur, lorsque je clique sur le "clic" sur le bouton, rien n'est lié pour l'attribut scope $champ d'application.test.

Je ne sais pas quel est le problème avec ng-interrupteur ou peut-être que je suis en train de faire quelque chose de mal. L'aide est apprécié!!!

http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq

Answer 1

C'est une étendue de l'héritage de problème en raison de ng-switch de la création de son propre champ d'application.

Il y a une recommandation qui apparaît un lot est de toujours utiliser un dot sur les modèles. La raison en est que lorsque le contrôleur de la portée de l'élément est un objet et non primitive, sous étendues créer une référence à la intiial objet. Si le modèle est une primitive, il ne sera pas de mise à jour de l'original.

Par exemple:

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

$scope.test={value:''}

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

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

À l'aide de l' dot méthodologie est une bonne pratique pour éviter ces problèmes que vous n'avez pas besoin de réfléchir plus profondément imbriquée étendues.

Démonstration à l'aide de test.value comme modèle: http://plnkr.co/edit/CkiF55bLXsYzR6ZjcrJp?p=preview

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

Answer 2

C'est parce que vous êtes en fait la création d'un enfant à l'intérieur de la ng-switch. Donc, une autre test de la propriété se trouve sur un champ appartenant à la ngSwitch directive. Il va d'abord montrer la valeur de son parent, mais lorsque vous la modifiez, parce que c'est un primitif, il ne modifie la valeur sur l'enfant, ne pas le parent. L'héritage par prototype n'est en jeu ici (mais c'est ce que nous avons besoin).

Lorsque vous cliquez sur le bouton, le bouton d'alerte/de la console.la journalisation de la propriété sur la portée parent... où l'enfant ne peut pas changer.

Pour corriger cette utilisation $parent.test sur votre ng-attribut de modèle 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 plunker le montrant en action.

Answer 3

J'ai rencontré de problème similaire, et je l'ai résolu par la création d'un champ variable dans le contrôleur et utilisé que dans ng-include et ng-switch. De cette façon, si vous avez profondément imbriquée ng-include's avec en ng-switch et ça va, on peut toujours utiliser directement cette étendue variable.

Comme tous les enfants étendues (ici, ng-include/ng-switch) s'étend de la portée parent (en général, les contrôleurs de la portée), on peut accéder à portée parent directement à partir avec l'enfant ces étendues sans problème.

À l'aide de $parent auront besoin d'écrire comme $parent.$parent.$parent.someProp

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