Question

我正在尝试了解ng-if和范围。据我所知，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）。我怎么能做到这一点？

Answer 1

是的，ng-if创建了一个新的子范围

要在ng-if中观看模型属性，经验法则是：

不要将范围用作模型

e.g。

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

在ng-model中使用对象属性 - 然后，即使ng-if创建新的子范围，父范围也会有更改。

要查看有效的Plunker，请查看此处：http://jsfiddle.net/Erk4V/4/

Answer 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

因为您没有在其父级作用域上隐藏属性，所以您只是在其父级作用域上改变对象，这确实会改变父级的数据对象。所以在你的情况下：

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

Answer 3

根据我所知，ng-if纯粹是一个显示级别的声明。在给定某些值的情况下，您可以使用它来使某些元素可见/不可见，但我不认为它会创建任何类型的范围。您的HTML代码将执行的操作是切换辅助输入的可见性。

如果您想要将值2切换为等于值1，那么＆＃34; someCondition＆＃34;在false和true之间进行更改，然后您可以使用$ watch：

console.log('hello!');

AngularJS ng-if和范围

3 个答案: