ChatGPT解决这个技术问题 Extra ChatGPT

AngularJS access parent scope from child controller

I've set up my controllers using data-ng-controller="xyzController as vm"

I have a scenario with parent / child nested controllers. I have no problem accessing parent properties in the nested html by using $parent.vm.property, but I cannot figure out how to access the parent property from within my child controller.

I've tried injecting $scope and then using $scope.$parent.vm.property, but this isn't working?

Can anyone offer advice?


D
Dieterg

If your HTML is like below you could do something like this:

<div ng-controller="ParentCtrl">
    <div ng-controller="ChildCtrl">
    </div>
</div>

Then you can access the parent scope as follows

function ParentCtrl($scope) {
    $scope.cities = ["NY", "Amsterdam", "Barcelona"];
}

function ChildCtrl($scope) {
    $scope.parentcities = $scope.$parent.cities;
}

If you want to access a parent controller from your view you have to do something like this:

<div ng-controller="xyzController as vm">
   {{$parent.property}}
</div>

See jsFiddle: http://jsfiddle.net/2r728/

Update

Actually since you defined cities in the parent controller your child controller will inherit all scope variables. So theoritically you don't have to call $parent. The above example can also be written as follows:

function ParentCtrl($scope) {
    $scope.cities = ["NY","Amsterdam","Barcelona"];
}

function ChildCtrl($scope) {
    $scope.parentCities = $scope.cities;
}

The AngularJS docs use this approach, here you can read more about the $scope.

Another update

I think this is a better answer to the original poster.

HTML

<div ng-app ng-controller="ParentCtrl as pc">
    <div ng-controller="ChildCtrl as cc">
        <pre>{{cc.parentCities | json}}</pre>
        <pre>{{pc.cities | json}}</pre>
    </div>
</div>

JS

function ParentCtrl() {
    var vm = this;
    vm.cities = ["NY", "Amsterdam", "Barcelona"];
}

function ChildCtrl() {
    var vm = this;
    ParentCtrl.apply(vm, arguments); // Inherit parent control

    vm.parentCities = vm.cities;
}

If you use the controller as method you can also access the parent scope as follows

function ChildCtrl($scope) {
    var vm = this;
    vm.parentCities = $scope.pc.cities; // note pc is a reference to the "ParentCtrl as pc"
}

As you can see there are many different ways in accessing $scopes.

Updated fiddle

function ParentCtrl() { var vm = this; vm.cities = ["NY", "Amsterdam", "Barcelona"]; } function ChildCtrl($scope) { var vm = this; ParentCtrl.apply(vm, arguments); vm.parentCitiesByScope = $scope.pc.cities; vm.parentCities = vm.cities; }

{{cc.parentCities | json}}
{{cc.parentCitiesByScope | json }}
{{pc.cities | json}}


I think the two issues with your last update is 1. Inheriting the parent scope can have potential namespace conflicts, and 2. Requires knowledge that parent controller alias is 'pc'. This makes re-use more difficult.
You defined controllers as function CtrlName(...){} but how can we achieve that using Angular nomenclature? like : angular.module(MdlName).controller(CtrlName, function(...){});
What do you mean? A controller is just a function? i.e. angular.module('app').controller('ParentCtrl', ParentCtrl);
sorry, you are right! In the 'controller as' method, using '$scope.pc.cities;' to access parent's cities seems to me a 'step back' because if in childCtrl we don't have the property 'cities' it will auto access parent's cities. There is no other way to solve this problem?
S
Stepan Suvorov

I've just checked

$scope.$parent.someProperty

works for me.

and it will be

{{$parent.someProperty}}

for the view.


hmmm, not working for me. Wonder if it has to do with the controller as vm syntax.
If you've named the parent controller then you would drop $parent in the template and have {{vm.someProperty}}
T
The Red Pea

When you are using as syntax, like ParentController as parentCtrl, to define a controller then to access parent scope variable in child controller use following :

var id = $scope.parentCtrl.id;

Where parentCtrl is name of parent controller using as syntax and id is a variable defined in same controller.


G
Gayan Pathirage

Some times you may need to update parent properties directly within child scope. e.g. need to save a date and time of parent control after changes by a child controller. e.g Code in JSFiddle

HTML

<div ng-app>
<div ng-controller="Parent">
    event.date = {{event.date}} <br/>
    event.time = {{event.time}} <br/>
    <div ng-controller="Child">
        event.date = {{event.date}}<br/>
        event.time = {{event.time}}<br/>
        <br>
        event.date: <input ng-model='event.date'><br>
        event.time: <input ng-model='event.time'><br>
    </div>
</div>

JS

    function Parent($scope) {
       $scope.event = {
        date: '2014/01/1',
        time: '10:01 AM'
       }
    }

    function Child($scope) {

    }

r
rustyx

You can also circumvent scope inheritance and store things in the "global" scope.

If you have a main controller in your application which wraps all other controllers, you can install a "hook" to the global scope:

function RootCtrl($scope) {
    $scope.root = $scope;
}

Then in any child controller, you can access the "global" scope with $scope.root. Anything you set here will be globally visible.

Example:

function RootCtrl($scope) { $scope.root = $scope; } function ChildCtrl($scope) { $scope.setValue = function() { $scope.root.someGlobalVar = 'someVal'; } } function OtherChildCtrl($scope) { }

someGlobalVar value: {{someGlobalVar}}


This doesn't really scale. It's like defining global variables that must be unique across many files/contexts.
I don't see a scaling issue, but calling the scope variable something other than 'root' might be better in other contexts
It's also a bit of a nuisance to have state that hangs around for longer than the lifetime of the component sub-tree that needs it.
B
Benjamin Thvedt

I believe I had a similar quandary recently

function parentCtrl() {
   var pc = this; // pc stands for parent control
   pc.foobar = 'SomeVal';
}

function childCtrl($scope) {

   // now how do I get the parent control 'foobar' variable?
   // I used $scope.$parent

   var parentFoobarVariableValue = $scope.$parent.pc.foobar;

   // that did it
}

My setup was a little different, but the same thing should probably still work


D
Donato Szilagyi

From a child component you can access the properties and methods of the parent component with 'require'. Here is an example:

Parent:

.component('myParent', mymodule.MyParentComponent)
...
controllerAs: 'vm',
...
var vm = this;
vm.parentProperty = 'hello from parent';

Child:

require: {
    myParentCtrl: '^myParent'
},
controllerAs: 'vm',
...
var vm = this;
vm.myParentCtrl.parentProperty = 'hello from child';

P
Peter Hollingsworth

Perhaps this is lame but you can also just point them both at some external object:

var cities = [];

function ParentCtrl() {
    var vm = this;
    vm.cities = cities;
    vm.cities[0] = 'Oakland';
}

function ChildCtrl($scope) {
    var vm = this;
    vm.cities = cities;
}

The benefit here is that edits in ChildCtrl now propogate back to the data in the parent.


introducing global variables is dangerous.