javascript - Update parent scope variable in AngularJS - Stack Overflow

admin管理员组

文章数量:1134554

I have two controllers, one wrapped within another. Now I know the child scope inherits properties from the parent scope but is there a way to update the parent scope variable? So far I have not come across any obvious solutions.

In my situation I have a calendar controller within a form. I would like to update the start and end dates from the parent scope (which is the form) so that the form has the start and end dates when submitted.

I have two controllers, one wrapped within another. Now I know the child scope inherits properties from the parent scope but is there a way to update the parent scope variable? So far I have not come across any obvious solutions.

In my situation I have a calendar controller within a form. I would like to update the start and end dates from the parent scope (which is the form) so that the form has the start and end dates when submitted.

• javascript
• angularjs
• angularjs-scope
• prototype
• angularjs-controller

Share Improve this question Follow edited Apr 5, 2020 at 7:18 Dan 63k1818 gold badges109109 silver badges118118 bronze badges asked Jun 4, 2013 at 22:08 Malcr001Malcr001 8,2891010 gold badges4646 silver badges5757 bronze badges 1

• sounds like your calendar controller should be a directive. – Jonah Commented Jun 4, 2013 at 22:42

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 197

You need to use an object (not a primitive) in the parent scope and then you will be able to update it directly from the child scope

Parent:

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";
});

Working demo: http://jsfiddle.net/sh0ber/xxNxj/

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

There is one more way to do this task and to not use the $scope.$parent variable.

Just prepare a method for changing the value in parent scope and use it in child one. Like this:

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

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

It also works and give you more control over the value changes.

You can then also call the method even in HTML like: <a ng-click="changeSimpleValue('y')" href="#">click me!</a>.

This also works (but not sure whether this follows best practice or not)

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

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

When you assign a primitive attribute to a scope, it is always local to the scope (possibly created on the fly), even if a parent scope has an attribute with the same name. This is a design decision, and a good one IMHO.

If you need to change some primitive (ints, booleans, strings) in the parent scope, from the view, you need it to be an attribute of another object in that scope, so the assignment may read:

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

and it will, in turn:

1. get the viewData object from whatever scope it is defined in
2. assign 4 to its myAttr attribute.

For accessing variables declared in the parent, we should use $parent in child controller or template file

In controller

$scope.$parent.varaiable_name

In html template

ng-model="$parent.varaiable_name"

本文标签： javascriptUpdate parent scope variable in AngularJSStack Overflow