更新AngularJS中的父范围变量答案

【问题标题】：Update parent scope variable in AngularJS更新AngularJS中的父范围变量
【发布时间】：2013-05-31 11:15:47
【问题描述】：

我有两个控制器，一个包裹在另一个中。现在我知道子范围从父范围继承属性但是有没有办法更新父范围变量？到目前为止，我还没有遇到任何明显的解决方案。

在我的情况下，我在表单中有一个日历控制器。我想从父范围（即表单）更新开始和结束日期，以便表单在提交时具有开始和结束日期。

【问题讨论】：

听起来你的日历控制器应该是一个指令。

标签： javascript angularjs angularjs-scope prototype angularjs-controller

【解决方案1】：

为了访问在父级中声明的变量，我们应该在子控制器或模板文件中使用$parent

在控制器中

$scope.$parent.varaiable_name

在html模板中

ng-model="$parent.varaiable_name"

【讨论】：

【解决方案2】：

您需要在父作用域中使用一个对象（不是原始对象），然后才能直接从子作用域更新它

家长：

app.controller('ctrlParent',function($scope){
    $scope.parentprimitive = "someprimitive";
    $scope.parentobj = {};
    $scope.parentobj.parentproperty = "someproperty";
});

孩子：

app.controller('ctrlChild',function($scope){
    $scope.parentprimitive = "this will NOT modify the parent"; //new child scope variable
    $scope.parentobj.parentproperty = "this WILL modify the parent";
});

工作演示：http://jsfiddle.net/sh0ber/xxNxj/

见What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

【讨论】：

谢谢，这行得通！我绝对应该阅读这个（原型继承和原语）。你能推荐一本比你的 SO 链接解释更多的好读物吗？

【解决方案3】：

还有另一种方法可以完成此任务并且不使用$scope.$parent 变量。

只需准备一种方法来更改父范围中的值并在子范围中使用它。像这样：

app.controller('ctrlParent',function($scope) {
  $scope.simpleValue = 'x';
  $scope.changeSimpleValue = function(newVal) {
    $scope.simpleValue = newVal;
  };
});

app.controller('ctrlChild',function($scope){
    $scope.changeSimpleValue('y');
});

它还可以让您更好地控制值的变化。

您甚至可以在 HTML 中调用该方法，例如：<a ng-click="changeSimpleValue('y')" href="#">click me!</a>。

【讨论】：

很好的解决方案！这是可行的，因为当在当前 $scope 中找不到某些东西时，Angular 会在 $parent 中查找。 docs.angularjs.org/guide/scope（参见“范围层次结构”）。
我喜欢这个答案，不需要创建不必要的对象。
未来读者：所有这些高五的 cmets 都有点误入歧途。为每个变量创建两个 setter 函数（它们是“不必要的对象”）是一种笨重且不必要的继承混乱，而不是 Angular 方式。 Angular 的创建者 Misko Hevery 发表了一次演讲，他在演讲中讲授“只要你有 ng-model，就必须在某个地方有一个点。如果你没有一个点，那你就做错了。” Misko video@29:19
如何使用 controllerAS 语法应用此解决方案？

【解决方案4】：

这也有效（但不确定这是否遵循最佳实践）

app.controller('ctrlParent',function($scope) {
    $scope.simpleValue = 'x';
});

app.controller('ctrlChild',function($scope){
    $scope.$parent.simpleValue = 'y';
});

【讨论】：

你是对的，在大多数情况下使用 $scope.$parent.value 会起作用，但是广泛使用通常不是最好的主意，因为它在更大、更复杂的项目中很难管理.

【解决方案5】：

当您将原始属性分配给作用域时，它始终是作用域的本地属性（可能是动态创建的），即使父作用域具有同名的属性。这是一个设计决定，恕我直言。

如果您需要更改父作用域中的某些原语（整数、布尔值、字符串），从视图中，您需要将其作为该作用域中另一个对象的属性，因此赋值可能为：

<a ng-click="viewData.myAttr = 4">Click me!</a>

它会反过来：

从定义的任何范围内获取viewData 对象
将 4 分配给其 myAttr 属性。

【讨论】：