template - angularjs-ng-switch no vincula ng-model

ng switch example angular 5

Question

Tengo este repro http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq que se muestra cuando hago clic en ''Título3'' y escribo un valor en el cuadro de texto, aunque el valor ingresado se refleja en la interfaz de usuario, cuando hago clic en el botón ''clic'' no aparece enlazado para el atributo de alcance $ scope.test.

No sé qué está mal con ng-switch o tal vez estoy haciendo algo mal. Se agradece la ayuda !!!

http://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq

Answer 1

Encontré un problema similar y lo resolví creando una variable de alcance en el controlador y la utilicé con ng-include y ng-switch . De esta manera, si ha anidado completamente ng-include con in ng-switch y continúa, todavía podemos usar esa variable de alcance directamente.

Como todos los ámbitos secundarios (aquí, ng-include / ng-switch ) se extienden desde el ámbito principal (generalmente, el alcance de los controladores), podemos acceder al ámbito principal directamente desde estos ámbitos secundarios sin ningún problema.

El uso de $parent requerirá escribir como $parent.$parent.$parent.someProp

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

Answer 2

Esto se debe a que en realidad está creando un ámbito secundario dentro del interruptor ng. Por lo tanto, existe otra propiedad de test en un ámbito que pertenece a la directiva ngSwitch. Inicialmente, mostrará el valor desde su ámbito principal, pero cuando lo edite, porque es primitivo, solo edita el valor en el secundario, no en el primario. La herencia prototípica no entra en juego aquí (pero eso es lo que necesitamos).

Cuando hace clic en el botón, el botón está alertando / console.logging la propiedad en el ámbito principal ... que el niño no puede cambiar.

Para solucionar esto, use $parent.test en su atributo ng-model en su ngSwitch:

un fragmento de código

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

Y aquí hay una bifurcación de su plunker que lo muestra en acción.

Answer 3

Este es un problema de herencia de alcance debido a que ng-switch crea su propio alcance.

Una recomendación hecha a menudo es siempre usar un dot en los modelos. La razón es que cuando el elemento de alcance del controlador es un objeto y no un primitivo, los sub-ámbitos crearán una referencia al objeto inicial. Si el modelo es primitivo no actualizará el original.

Por ejemplo:

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

$scope.test={value:''''}

Otro enfoque es usar $parent en el marcado del modelo html:

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

Usar la metodología de dot es una buena práctica para evitar estos problemas, ya que no es necesario pensar en ámbitos anidados más profundos.

Demo usando test.value como modelo: http://plnkr.co/edit/CkiF55bLXsYzR6ZjcrJp?p=preview

Referencia sobre dot en modelos (lectura valiosa): https://github.com/angular/angular.js/wiki/Understanding-Scopes