How do I access a variable in parent state controller into child state in UI-router

Question

Issue Simulation: http://plnkr.co/edit/ZPgMxGwhha7S1cmTSNg8?p=info

Description: I want to share the data of parent state to child state. I am not creating a separate controller for child states. Also I am creating a nested views. So ideally children should share the parent scope. But it is not working.

this.successHandler = function(data){
   console.log("Inside Success Handler");
   mainCtrl.company = data;
};

I am initializing the company object in parent scope and binding it with the view of child state.

<input class="form-control" ng-model="mainCtr.company.name" type="text" placeholder="Enter Name Here">

I have checked one of the approach here. But somehow it is not working in my case. Also I am trying to avoid usage of $scope and using "this" instead. Can someone help me accessing "mainCtrl.company" data inside all the three tabs?

score 0 · Accepted Answer · answered Sep 10 '15 at 09:57

0

You seem to be doing it correctly, except having mispelt mainCtrl as mainCtr in your child views.

answered Sep 10 '15 at 09:57

xiankai

2,773
3
25
31

Oh Thanks alot. Thats working. A silly mistake from my side. – Mahesh Sep 10 '15 at 10:20
@MaheshKedari no problem, an extra pair of eyeballs helps when you've looked at your own code for too long! – xiankai Sep 10 '15 at 10:22

score 0 · Answer 2 · answered Sep 10 '15 at 10:32

In short, angular's child scope inherits from its parent scope, which is available in view without the $scope prefix. Because you use this instead of $scope to manage your data and fields, you need to create a communicate property (what controllerAs do here) . If there is no 'controllerAs', let's say we want a parent property, (add $scope.parent = this; in mainController L:29), and access with parent.company.name in the 3 child states with

<input class="form-control" ng-model="parent.company.name" type="text" placeholder="Enter Name Here">

How do I access a variable in parent state controller into child state in UI-router

2 Answers2