34

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 に頼ることはできますか?
4

3 に答える 3

4

1. 1 が機能しないのはなぜですか?
ng-if新しいスコープを作成します。このビデオで説明されているように、「奇妙な」バインド動作が発生します: http://egghead.io/lessons/angularjs-the-dot

2. 1 は機能しますか?
親スコープからのプロパティの読み取りは機能しますが (プロトタイプ チェーン)、スコープへの書き込みは子スコープに新しいプロパティを作成します。非接続の作成

3. なぜ 2 が機能するのですか?
同じプロパティが親スコープ (obj) から読み取られます。ng-click の書き込みは、スコープではなく「obj」オブジェクトを変更します。

4/5。2 機能する必要がありますか? AngularJS の将来の更新で動作するように 2 に頼ることはできますか?
はい、これは文書化された予想される動作です。

ヒント: Chrome 拡張機能のAngularJS Batarangを使用して、どの変数がどのスコープにあるかについての洞察を得ています。

于 2013-11-06T12:35:02.727 に答える