AngularJS - 子控制器私有范围（防止继承）答案

【问题标题】：AngularJS - Child controller private scope (preventing inheritance)AngularJS - 子控制器私有范围（防止继承）
【发布时间】：2017-01-11 19:34:06
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

创建一个空范围的 transclude 指令怎么样？和你的 childController 附加
这很有趣！我会调查一下。您介意提供一个示例来说明您的想法吗？
到底是什么问题？子 div 将显示来自子控制器的 myVariable，而父 div 将显示来自父控制器的 myVariable。这不是你想要的吗？
不，父级不能覆盖子级范围内的任何内容。
你的做法很好。也可以考虑使用controller as语法（docs.angularjs.org/api/ng/directive/ngController），不过我个人不喜欢。

标签： angularjs angularjs-scope

【解决方案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
}])

我知道答案已经很晚了，但希望从现在开始遇到这个问题的人会觉得它有帮助

【讨论】：

【解决方案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
}])

【讨论】：

【解决方案3】：

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

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

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

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

这在视图中使用 {{myVariable}} 时有效。我也用观察者测试了它，它会观察他们范围内的变量，而不是它的父或子版本。请参阅https://plnkr.co/edit/mXLNGAGc0q8T36DV43aK 进行一些测试。

【讨论】：