ejemplos - AngularJS ng-if y alcances

ng-show angularjs

Question

Estoy tratando de entender ng-if y ámbitos. Como sé, ng-if crea un nuevo ámbito secundario. Aquí está mi problema:

Ver

<input ng-model="someValue1" />
<div ng-if="!someCondition">
    <input ng-model="$parent.someValue2" />
</div>

Controlador

$scope.someCondition = true;

if ($scope.someCondition) {
    $scope.someValue2 = $scope.someValue1;        
}

Si someCondition se establece en true, someValue2 debería ser el mismo que someValue1.

Mi problema es que no puedo acceder a someValue2 en ambas situaciones (verdadero o falso). ¿Cómo podría lograr esto?

Answer 1

Por lo que sé, ng-if es puramente una declaración de nivel de visualización. Puede usarlo para hacer que algunos elementos sean visibles / invisibles dados ciertos valores, pero no creo que cree ningún tipo de alcance. Lo que hará su código HTML es alternar la visibilidad de su entrada secundaria.

Si desea cambiar su Valor 2 para que sea igual al Valor 1 cada vez que "alguna condición" cambie entre falso y verdadero, entonces puede usar $ watch con algo como esto:

$scope.$watch(someCondition, function(){
  if (someCondition){
    $scope.someValue1 = $scope.someValue2
  }
})

Answer 2

Sí, ng-if crea un nuevo ámbito hijo

Para ver una propiedad de modelo en un ng-if , la regla de oro es:

NO UTILICE EL ALCANCE COMO MODELO

p.ej

ng-if=''showStuff'' //here my scope is model **INCORRECT**
ng-if=''someObject.showStuff'' // ** CORRECT **

Use una propiedad de objeto en ng-model; luego, incluso si ng-if crea el nuevo ámbito secundario, el ámbito principal tendrá los cambios.

Para ver un Plunker en funcionamiento, mira aquí: http://jsfiddle.net/Erk4V/4/

Answer 3

ngIf crea un nuevo alcance usando herencia prototípica. Lo que esto significa es que el objeto prototipo del alcance del ngIf es el del alcance de su padre. Por lo tanto, si el atributo no se encuentra en la instancia ngIf de su ámbito, buscará ese atributo en su cadena de objetos prototipo. Sin embargo, una vez que asigne un atributo a la instancia del alcance, ya no buscará el atributo en su cadena de herencia. Aquí hay un enlace que explica la herencia prototípica utilizada en JS: https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance

Cómo resolver esto:

Controlador principal:

$scope.data = {someValue: true};

Controlador infantil:

$scope.data.someValue = false

Debido a que no está ocultando un atributo en el alcance de su padre, simplemente está mutando un objeto en el alcance de su padre, esto de hecho alterará el objeto de datos del padre. Así que en tu caso:

<input ng-model="data.someValue1" />
<div ng-if="!data.someCondition">
    <input ng-model="data.someValue2" />
</div>