AngularJS ng-if и области

Я пытаюсь понять ng-if и scopes. Как мне известно, ng-if создает новый дочерний объект. Вот моя проблема:

Вид

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

контроллер

$scope.someCondition = true;

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

Если для someCondition установлено значение true, то someValue2 должен быть таким же, как someValue1.

Моя проблема в том, что я не могу получить доступ к someValue2 в обеих ситуациях (true или false). Как я мог достичь этого?

Ответ 1

Да, ng-if создает новый дочерний объект

Чтобы посмотреть свойство модели в ng-if, правило большого пальца:

НЕ ИСПОЛЬЗУЙТЕ ОБЪЕМ КАК МОДЕЛЬ

например.

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

Использовать свойство объекта в ng-модели - тогда даже если ng-if создает новую дочернюю область, родительская область будет иметь изменения.

Чтобы увидеть рабочий Plunker, посмотрите здесь: http://jsfiddle.net/Erk4V/4/

Ответ 2

ngIf действительно создает новую область с использованием прототипального наследования. Это означает, что объект прототипа области ngIf - это объект родительской области. Поэтому, если атрибут не найден в экземпляре ngIf его области видимости, он рассмотрит цепочку объектов прототипа для этого атрибута. Однако, как только вы назначаете атрибут экземпляру области, он больше не будет рассматривать цепочку наследования для этого атрибута. Здесь ссылка, объясняющая прототипическое наследование, используемое в JS. https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance

Как это решить.

Родительский контроллер:

$scope.data = {someValue: true};

Ребенок:

$scope.data.someValue = false

Так как вы не скрываете атрибут на нем, то в качестве родительской области вы просто мутируете объект в области с родителями, это действительно изменит данные родителей obj. Так что в вашем случае.

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

Ответ 3

Из того, что я знаю, ng-if - это просто оператор уровня отображения. Вы можете использовать его, чтобы некоторые элементы были видимыми/невидимыми при определенных значениях, но я не думаю, что он создает какой-либо объем. Что ваш HTML-код будет делать, это переключить видимость вашего вторичного ввода.

Если вы хотите переключить свое значение 2 на равное значение 1 всякий раз, когда "someCondition" изменяется между false и true, вы можете использовать $watch с чем-то вроде этого:

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