更新AngularJS中的父范围变量

问题描述 投票:113回答:5

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

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

javascript angularjs angularjs-scope prototype angularjs-controller
5个回答
192
投票

您需要在父作用域中使用一个对象(不是原始对象),然后就可以直接从子作用域中对其进行更新

父母:

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

Child:

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?


116
投票

还有另一种方法可以执行此任务并且不使用$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>


6
投票

这也可行(但不确定是否遵循最佳实践)

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

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

4
投票

当您将基本属性分配给合并范围时,即使父合并范围的属性具有相同的名称,该属性在合并范围内也是本地的(可能是动态创建的)。这是一项设计决定,也是不错的恕我直言。如果需要从视图中更改父范围中的某些原语(整数,布尔值,字符串),则需要将其作为该范围中另一个对象的属性,因此赋值可能为:

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

它将依次:

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

3
投票
要访问在父级中声明的变量,我们应该在子控制器或模板文件中使用$ parent
© www.soinside.com 2019 - 2024. All rights reserved.