angularjs – ng-switch ne lie pas ng-model

Il s’agit d’un problème d’inheritance d’étendue dû au fait que ng-switch crée sa propre scope.

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

Par exemple:

 $scope.test={value:''} 

Une autre approche consiste à utiliser $parent dans le balisage de modèle HTML:

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

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

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

Cela est dû au fait que vous créez une étendue enfant à l’intérieur du commutateur ng. Une autre propriété de test existe donc sur une étendue appartenant à la directive ngSwitch. Il affiche initialement la valeur de son étendue parent, mais lorsque vous le modifiez, car il s’agit d’une primitive, il n’édite que la valeur sur l’enfant, pas le parent. L’inheritance 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 scope parent … que l’enfant ne peut pas modifier.

Pour corriger cela, utilisez $parent.test sur votre atsortingbut ng-model dans votre ngSwitch:

un extrait:

   {{test}}  

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

J’ai rencontré un problème similaire et j’ai résolu en créant une variable de scope dans le contrôleur et en l’utilisant avec in ng-include et ng-switch . De cette façon, si vous avez nested ng-include avec in ng-switch et que cela continue, nous pouvons toujours utiliser directement cette variable de scope.

Comme toutes les scopes enfants (ici, ng-include / ng-switch ) vont de la scope parent (en général, de la scope des contrôleurs), nous pouvons accéder à la scope parent directement avec with dans ces scopes enfants sans problème.

Utiliser $parent nécessitera d’écrire comme $parent.$parent.$parent.someProp

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