模型不会在 ng-if 内更新答案

【问题标题】：Model does not update within ng-if模型不会在 ng-if 内更新
【发布时间】：2013-12-02 18:21:30
【问题描述】：

我在 Angular 应用程序中有一个奇怪的行为，我不知道这是错误还是已知限制：

'use strict';

var ctrl = function ($scope) {
    $scope.foo = false;
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="ctrl">
  foo: {{foo}}
  <div ng-if="foo" style="background-color: #f00;">
    <p>foo</p>
  </div>
  <div ng-if="!foo">
    <br/><button ng-click="foo = true;">Show foo</button>
  </div>
  <button ng-click="foo = true">Show foo</button>
</div>

http://jsfiddle.net/78R52/

我希望单击其中一个按钮会设置foo = true，但单击第一个按钮（在ng-if="!foo" 内）不会更改模型。

测试版本为1.2.1。

【问题讨论】：

标签： javascript angularjs angular-ng-if

【解决方案1】：

ng-if有自己的作用域，所以需要使用：

<br/><button ng-click="$parent.foo = true;">Show foo</button>

更新小提琴：http://jsfiddle.net/78R52/1/

【讨论】：

谢谢。在发布我的问题后，我也有这个想法。在询问之前应该查看ng-if 的文档...
谢谢！在拔掉我的头发之前发现了这个！

【解决方案2】：

啊，ng-if 创建了一个新范围！所以，“模型名称中必须有一个点”！

http://jsfiddle.net/78R52/2/

【讨论】：

对，由于 ng-if 作用域是控制器作用域的子作用域，您还可以使用 $parent.foo 访问控制器作用域上的 foo。

【解决方案3】：

正如其他人所说，ng-if 有自己的范围。我想说的是，将表达式放在视图中是一种不好的做法。好的做法是在视图中调用范围函数。

var ctrl = function($scope){
$scope.foo = false;
$scope.fn = fn;
function fn(){
$scope.foo = true;
}
/////

<div ng-app ng-controller="ctrl">
  foo: {{foo}}
  <div ng-if="foo" style="background-color: #f00;">
    <p>foo</p>
  </div>
  <div ng-if="!foo">
    <br/><button ng-click="fn()">Show foo</button>
  </div>
  <button ng-click="fn()">Show foo</button>
</div>

【讨论】：

任何论据，为什么你称之为不好的做法？
你知道，Angular 有很多好的和坏的做法。我将其称为不好的做法，因为可能会出现像您这样的问题，尤其是当多个范围相互封装时，例如多个 ng-repeats、ng-ifs 和其他指令。