AngularJS ng-if和范围[重复]

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。我怎样才能做到这一点？

Answer 1

是的，ng-if 创建了一个新的子作用域

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

请勿将范围用作模型

例如

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 代码将做的是切换辅助输入的可见性。

如果您想在“someCondition”在 false 和 true 之间变化时将您的值 2 切换为等于值 1，那么您可以将 $watch 与以下内容一起使用：

$scope.$watch(someCondition, function(){
  if (someCondition){
    $scope.someValue1 = $scope.someValue2
  }
})