angularjs - ng-switch non associa ng-model

Question

Ho questa repro http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq che mostra quando faccio clic su "Titolo3" e inserisci un valore nella casella di testo sebbene il valore immesso mostri riflesso nell'interfaccia utente, quando clicco il clic 'pulsante non è associato per l'attributo scope $ scope.test.

Non so cosa c'è di sbagliato con ng-switch o forse sto facendo qualcosa di sbagliato. L'aiuto è apprezzato !!!

http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq

Answer 1

Questo è un problema ambito eredità spettanti a ng-switch creazione di una propria scopo.

Una raccomandazione fatta spesso è sempre quella di utilizzare un dot sui modelli. Il motivo è che quando l'oggetto dello scope del controller è un oggetto e non un primitivo, i sotto-ambiti creeranno un riferimento all'oggetto iniziale. Se il modello è un primitivo, non aggiornerà l'originale.

Ad esempio:

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

$scope.test={value:''} 

Un altro approccio è quello di utilizzare $parent in html Model Markup:

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

Utilizzando la metodologia dot è una buona pratica per evitare questi problemi, come si don Non c'è bisogno di pensare agli ambiti nidificati più profondi.

Demo utilizzando test.value come modello: http://plnkr.co/edit/CkiF55bLXsYzR6ZjcrJp?p=preview

di riferimento per quanto riguarda dot nei modelli (lettura di valore): https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 2

Questo perché si sta effettivamente creando un ambito bambino dentro della ng-switch. Quindi esiste un'altra proprietà test su un ambito appartenente alla direttiva ngSwitch. Inizialmente mostrerà il valore dal suo ambito genitore, ma quando lo modifichi, poiché è una primitiva, modifica solo il valore sul figlio, non sul genitore. L'eredità prototipica non entra in gioco qui (ma questo è ciò di cui abbiamo bisogno).

Quando si fa clic sul pulsante, il pulsante avvisa/console.logging la proprietà sull'ambito padre ... che il bambino non può modificare.

Per fissare questo uso $parent.test sul tuo attributo ng-modello in vostro ngSwitch:

un frammento:

<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

ho incontrato problema simile, e ho risolto con la creazione di una variabile ambito nel controller e usato quello con in ng-include e ng-switch. In questo modo se hai nidificato in profondità ng-include con ng-switch e continua, possiamo ancora utilizzare direttamente quella variabile di ambito.

Come tutti gli ambiti del bambino (qui, ng-include/ng-switch) si estende dal campo di applicazione genitore (in genere, i controller ambito di applicazione), siamo in grado di accedere portata genitore direttamente da con in questi ambiti di bambino senza un problema.

Utilizzando $parent richiederà di scrivere come $parent.$parent.$parent.someProp

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