Question

我有一个需要嵌套控制器的情况。我不希望子范围从父范围继承，因为我在两个控制器中都有相同名称的范围变量。有没有办法做到这一点？

我试图阻止在更改parentController的变量时更新childController的变量。

<div ng-controller="parentController">
     {{myVariable}}
     <div ng-controller="childController">
          {{myVariable}}
     </div>
</div>

我知道我可以更改子控制器范围变量的名称以完全避免继承问题，但我正在寻找替代方案。有没有任何已知的方法来做到这一点？

有点像隔离指令的范围，但隔离或私有控制器范围。

编辑：我发现当子控制器中没有该var设置的默认值时，子控制器将继承父控制器范围var值。

比较：http://jsfiddle.net/4qcqdb6z/到http://jsfiddle.net/4qcqdb6z/2/

Answer 1

我在开发自己的表单时遇到了这个问题。我来到这里找不到回应。所以我自己弄清楚了。所以对于你的代码，

<div ng-controller="parentController">
     {{myVariable}}
     <div ng-controller="childController">
          {{myVariable}}
     </div>
</div>

您的子控制器应包含范围：{}

.controller('childController',  ['$scope', function($scope){
 scope:{}; //this prevents it from inheriting the parent scope variables
}])

我知道答案已经很晚了，但希望那些从现在开始遇到这个问题的人发现它很有用

Answer 2

试试这个：

<div ng-controller="parentController as parent">
     {{parent.myVariable}}
     <div ng-controller="childController as child">
          {{child.myVariable}}
     </div>
</div>

在控制器中：

.controller('childController',  [, function(){
     var vm = this; // You can use now vm like $scope
}])

Answer 3

实现此目的的一种方法是在子控制器中使用Object.defineProperty

.controller('childController',  ['$scope', function($scope){
    Object.defineProperty($scope, 'myVariable', { value: 'childControllerValue', writable: true });
}])

这将在子作用域上创建一个变量myVariable，可以独立于父作用域上具有相同名称的变量进行设置。

Angular继承有效，因为父作用域是子作用域的原型，所以如果在您的子作用域中尝试访问或分配给$scope.myVariable，javascript会在内部查找原型链并实际访问{{ 1}}。通过直接在对象上定义新属性，可以屏蔽此继承属性，从而允许使用独立值。

在视图中使用$scope.__proto__.myVariable时，此方法有效。我也用观察者对它进行了测试，它将观察其范围内的变量，而不是它的父或子版本。有关测试，请参阅https://plnkr.co/edit/mXLNGAGc0q8T36DV43aK。

AngularJS - 子控制器私有范围（阻止继承）

3 个答案: