AngularJS: ng - если не работает в сочетании с ng-click?

Учитывая этот тестовый пример, используя AngularJS 1.2 rc3: http://plnkr.co/edit/MX6otx (повторяется ниже)

1.

<li ng-init="toggle1 = false">
    ng-if toggle1: {{ toggle1 }}
    <p>
        <button ng-if="!toggle1" ng-click="toggle1 = true">Turn On</button>
        <button ng-if="toggle1" ng-click="toggle1 = false">Turn Off</button>
        does not work
</li>

2.

<li ng-init="obj={toggle2:false}">
    ng-if obj.toggle2: {{ obj.toggle2 }}
    <p>
        <button ng-if="!obj.toggle2" ng-click="obj.toggle2 = true">Turn On</button>
        <button ng-if="obj.toggle2" ng-click="obj.toggle2 = false">Turn Off</button>
        then why does this work?
</li>

Вопросы:

  • Почему 1 не работает?
  • Должен ли я работать?
  • Почему работает 2?
  • Должны ли 2 работать?
  • Могу ли я полагаться 2 на работу в будущих обновлениях AngularJS?

Ответы

Ответ 1

  • Почему 1 не работает?:. Поскольку ngIf определяет свою собственную область, которая прототипна наследует от родительской области (точно так же, как ngRepeat). Итак, когда вы изменяете значение поля внутри ngIf, вы меняете его в области ngIf, а не в его родительской области.
  • Должен ли 1 работать?: Нет
  • Почему работают 2?:. В этом случае вы изменяете содержимое объекта, на который ссылается область ngId, через наследование.
  • Должны ли 2 работать?: Да
  • Могу ли я полагаться на 2 в будущих обновлениях AngularJS?: Почему бы вам не быть?

Этот механизм наследования сферы очень хорошо объясняется в https://github.com/angular/angular.js/wiki/Understanding-Scopes

Ответ 2

Так как ngIf создает собственную область видимости, для ее работы вы можете определить toggle1 в одной области:

JS **

$scope.toggleMe = function(){
     $scope.toggle1 = !$scope.toggle1;
    }

HTML

<li ng-init="toggle1 = true">
        ng-if toggle1: {{ toggle1 }}
        <p>
            <button ng-if="toggle1"  ng-click="toggleMe()">Turn On</button>
            <button ng-if="!toggle1"  ng-click="toggleMe()">Turn Off</button>
            does not work
    </li>

См. демонстрацию Plunker

Ответ 3

1. Почему 1 не работает?
ng-if создает новую область. который вызывает "странное" поведение привязки, как описано в этом видео: http://egghead.io/lessons/angularjs-the-dot

2. Должен ли я работать?
Чтение свойств из родительской области действия (цепочка прототипов), но запись в область создает новое свойство в области дочерних объектов. Создание отключенного

3. Почему 2 работают?
То же свойство считывается из родительской области (obj). Запись в ng-click изменяет объект obj, а не область.

4/5. Должны ли 2 работать? Могу ли я полагаться на 2, чтобы работать в будущих обновлениях AngularJS?
ДА, это документированное ожидаемое поведение.

Совет: Я использую расширение Chrome AngularJS Batarang, чтобы получить представление о том, какие переменные находятся в этой области.