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

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