angularjs - ng-switch bindet nicht ng-model

Question

Ich habe diese Repro http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq, die zeigen, wenn ich auf 'Title3' und geben Sie einen Wert in das Textfeld ein, obwohl der eingegebene Wert in der Benutzeroberfläche angezeigt wird, wenn ich auf 'klicken klicken Für das Scope-Attribut $ scope.test wird nichts gebunden.

Ich weiß nicht, was ist falsch mit ng-Schalter oder vielleicht mache ich etwas falsch. Hilfe wird geschätzt !!!

http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq

Answer 1

Dies ist ein Problem Umfang Vererbung aufgrund ng-switch seine eigene Schaffung Umfang.

Eine Empfehlung, die oft gemacht wird, ist immer eine dot auf Modellen zu verwenden. Der Grund dafür ist, dass Subscopes einen Verweis auf das ursprüngliche Objekt erstellen, wenn es sich bei dem Controller-Bereichselement um ein Objekt und nicht um ein Grundelement handelt. Wenn das Modell ein Grundelement ist, wird das Original nicht aktualisiert.

Zum Beispiel:

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

$scope.test={value:''} 

Ein weiterer Ansatz ist $parent in html Modell Markup zu verwenden:

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

Mit der dot Methodik ist eine gute Praxis, diese Fragen, wie Sie don zu vermeiden Denke nicht an tiefer verschachtelte Bereiche.

Demo test.value als Modell: http://plnkr.co/edit/CkiF55bLXsYzR6ZjcrJp?p=preview

Referenz in Bezug auf dot in Modellen (wertvolle Lesung): https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 2

Das ist, weil Sie tatsächlich ein Kind Umfang innerhalb des ng-Schalter zu schaffen. Eine weitere test -Eigenschaft existiert in einem Bereich, der zur ngSwitch-Direktive gehört. Zunächst wird der Wert aus dem übergeordneten Bereich angezeigt. Wenn Sie ihn jedoch bearbeiten, weil er ein primitives Element ist, wird nur der Wert für das untergeordnete Element und nicht für das übergeordnete Element bearbeitet. Prototypische Vererbung kommt hier nicht in Frage (aber das brauchen wir).

Wenn Sie auf die Schaltfläche klicken, alarmiert/console.log die Eigenschaft auf dem übergeordneten Bereich ..., die das Kind nicht ändern kann.

diesen Einsatz zu beheben $parent.test auf dem Attribut ng-Modell in Ihrem ngSwitch:

ein Ausschnitt:

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

And here's a fork of your plunker showing it in action.

Answer 3

mir ähnliches Problem begegnet ist, und ich habe durch die Schaffung eines Bereich Variable in der Steuerung gelöst und benutzte das mit in ng-include und ng-switch. Auf diese Weise, wenn Sie tief verschachtelt haben ng-include mit in ng-switch und es geht weiter, können wir immer noch direkt diese Scope-Variable verwenden.

Wie alle untergeordneten Bereiche (hier ng-include/ng-switch) erstreckt sich vom Umfang Elternteil (in der Regel, Controller scope), wir können problemlos übergeordneten Bereich direkt von mit in diesen untergeordneten Bereiche zugreifen.

Mit $parent wird wie $parent.$parent.$parent.someProp

Beispiel Plunk schreiben benötigen: für dieses Verhaltenhttp://plnkr.co/edit/8UGH7nUpFmATiXfkYSwr?p=preview