AngularJS ng-if和范围[重复]

Question

这个问题在这里已有答案：

• AngularJS中范围原型/原型继承的细微差别是什么？ 3个答案

我试图了解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观察模型属性，经验法则是：

不要将范围用作模型

例如

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之间切换时将Value 2切换为等于Value 1，那么您可以使用$ watch，如下所示：

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