AngularJ: ng-click과 조합하여 동작하지 않는 경우?

AngularJ: 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. 1이 작동하지 않는 이유는 무엇입니까?
2. 1개면 되나?
3. 왜 2가 되는 거죠?
4. 2개면 될까요?
5. AngularJs의 향후 업데이트를 위해 2개를 사용할 수 있습니까?

1. 1이 동작하지 않는 이유:ngIf는 자체 범위를 정의하기 때문에 ngRepeat과 마찬가지로 상위 범위로부터 프로토타입으로 상속됩니다.따라서 ngIf 내에서 필드의 값을 변경할 때는 부모 범위가 아닌 ngIf 범위에서 필드의 값을 변경합니다.
2. 1이 작동해야 합니까?:아니요.
3. 2가 동작하는 이유:이 경우 상속을 통해 ngId 범위에서 참조되는 객체의 내용을 수정하기 때문입니다.
4. 2개가 작동해야 합니까?:네.
5. AngularJs의 향후 업데이트를 위해 2개를 사용할 수 있습니까?왜요?

이 범위 상속 메커니즘에 대해서는 https://github.com/angular/angular.js/wiki/Understanding-Scopes에서 자세히 설명합니다.

부터ngIf독자적인 스코프를 작성하고, 정의할 수 있도록 합니다.toggle11개의 범위:

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>

데모 참조

1. 1이 작동하지 않는 이유는 무엇입니까?
ng-if새로운 스코프가 생성됩니다.이 비디오에서 설명한 바와 같이, http://egghead.io/lessons/angularjs-the-dot 에 의해, 「스위치」바인딩 동작이 발생합니다.

2. 1이 효과가 있을까요?
상위 스코프에서 속성을 읽으면 작동하지만(프로토타입 체인), 스코프에 쓰면 하위 스코프에 새 속성이 생성됩니다.절단된 생성

3. 2는 왜 작동합니까?
부모 스코프(obj)에서도 같은 속성이 읽힙니다.write in ng-click은 범위가 아닌 "obj" 개체를 변경합니다.

4/5. 2개면 될까요?AngularJs의 향후 업데이트를 위해 2개를 사용할 수 있습니까?
예, 이것은 문서화된 예상 동작입니다.

팁: Chrome Extension Angular 사용JS Batarang은 어떤 변수가 어떤 범위에 있는지에 대한 통찰력을 얻습니다.

언급URL : https://stackoverflow.com/questions/19812116/angularjs-ng-if-not-working-in-combination-with-ng-click