Domanda angularjs - ng-switch non associa ng-model


Ho questa riproduzione http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq che viene visualizzato quando faccio clic su "Titolo3" e inserisci un valore nella casella di testo, sebbene il valore immesso venga visualizzato nell'interfaccia utente, quando faccio clic sul pulsante "fai clic" non viene associato alcun oggetto 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 


44
2018-03-23 23:30


origine


risposte:


Questo è un problema di ereditarietà dell'ambito a causa di ng-switch creando il proprio ambito.

Una raccomandazione fatta spesso è sempre quella di usare a 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.

Per esempio:

<input ng-model="test.value" placeholder="pre" type="text" />
$scope.test={value:''}

Un altro approccio è da usare $parent nel markup del modello html:

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

Usando il dot la metodologia è una buona pratica per evitare questi problemi in quanto non è necessario pensare a ambiti nidificati più profondi.

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

Riferimento in merito dot in modelli (lettura di valore): https://github.com/angular/angular.js/wiki/Understanding-Scopes


84
2018-03-24 00:21



Questo perché in realtà stai creando un ambito figlio all'interno di ng-switch. Quindi un altro test la proprietà esiste su uno scope che appartiene 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 risolvere questo uso $parent.test sull'attributo ng-model in ngSwitch:

un frammento:

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

Ed ecco un fork del tuo plunker che lo mostra in azione.


9
2018-03-24 00:18



Ho riscontrato un problema simile e ho risolto creando una variabile di ambito nel controller e l'ho utilizzata con ng-include e ng-switch. In questo modo se hai nidificato profondamente ng-includeè dentro ng-switch e continua, possiamo ancora usare direttamente quella variabile scope.

Come tutti gli ambiti figlio (qui, ng-include/ng-switch) si estende dall'ambito genitore (generalmente, ambito dei controllori), noi può accedere direttamente allo scope genitore da con in questi ambiti figlio senza problemi.

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

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


3
2018-05-08 05:50