Without using a service or constructing watchers in the parent controller, how would one give children states access to the main controller's $scope
.
.state("main", {
controller:'mainController',
url:"/main",
templateUrl: "main_init.html"
})
.state("main.1", {
controller:'mainController',
parent: 'main',
url:"/1",
templateUrl: 'form_1.html'
})
.state("main.2", {
controller:'mainController',
parent: 'main',
url: "/2",
templateUrl: 'form_2.html'
})
I'm not able to access the mainController scope in child state--or rather I'm getting another instance of that scope--not what I want. I feel I'm missing something simple. There is a shared data config option in the state object but I'm not sure if this should be used for something like this.
The idea is that you use scope in parent->child inheritance:
Than the usage is simple, you have 3 controllers, one is shared (mainController) and each view has it's own.
Isn't the simplest solution to group shared variables into a service you can access in every controller ? ...
You can get the whole scope through $rootScope. If you need just part of the scope, ui-router has a custom data feature.
Here's how to do a multi-step form. I needed the routes to contain info for about their steps in the flow.
First, I have some routes with UI-router:
Notice:
data
element in each route.abstract
state hasSignupController
. That's the only controller for this multi-step form. Theabstract
isn't required, but makes sense for this use case.SignupController.js
Here we get ui-router's
$state
and put it on$scope
Here is the main template 'sign-up/index.html',:
The child templates can be whatever they like.
I created working plunker, showing how to use
$scope
and UI-Router.The state definition is unchanged:
But each state can have different controller. Why? because each
view
of each state getsnew
instance of definedcontroller
. So while we havemainController
like the one below, we can be sure, that if we navigate to state'main.2'
it will be instantiated twice.But what we can see here, is that we check if
$scope.Model
already exsits... and if not (Parent state) we instantiate it with new intance{Name : "xxx"}
.Well, what I am saying is: only parent state will init the
$scope.Model
. All others will get that already filled. How? Well here is the answer:Scope Inheritance by View Hierarchy Only
So, as stated in the documentation. Because our child views are nested in the parent view, the scope is inherited.
Understanding Scopes
And that's it. We get inheritance from
UI-Router
views and angular scopes, and because we smartly used a reference type (Model
), i.e. do have'.'
dot inng-model
definition - we can share data nowNOTE: having dot '.' in the
ng-model="Model.PropertyName
simply means, that there is areference
objectModel {}
with some property:PropertyName
Check the working example here
If you are using nested views just dont write any other Controller. By this way they will share same Controller Data.