27

Considering the following states taken from the ui-router documentation:

.state('state1', { url: '/state1', templateUrl: 'partials/state1.html' controller: 'State1Ctrl' }) .state('state1.list', { url: '/list', templateUrl: 'partials/state1.list.html', }) 

And the controller for "partials/state1.html" for state "state1":

.controller('State1Ctrl', function () { }); 

Is there any built-in feature to determine from within the controller or within the template, what state the controller/template is associated with?

For example:

.controller('State1Ctrl', function ($state) { console.log($state.this); // state1 }); 

And if there is no built-in solution, how would you "decorate" $state or $stateParams, to contain this information?

The only solution I've come up with is to use $state.get() and then find the state with the controller or template value. This seems incredibly messy, though.

8 Answers 8

71

You can access the current state configuratin object like this:

$state.current 

For further information take a look at the $state documentation.

Sign up to request clarification or add additional context in comments.

3 Comments

Current state will show $scope.current === 'state1.list' inside of 'State1Ctrl', not $scope.current = 'state1' IF the state is 'state1.list'. $state.current is always the current state, not the state bound to the controller.
In ionic1 is actually $state.current.name - but nevertheless thank you for help
Its blank when just hit the page
34

You can do it as follow,

$state.current.name //Return the name of current state 

Comments

10

Couldn't find this documented anywhere, so I looked in the source code.

There is a data field named $uiView attached to the ui-view element, it contains the view name and the associated state. You can get this state like this:

elem.closest('[ui-view]').data('$uiView').state 

or even

elem.inheritedData('$uiView').state 

5 Comments

Wow, thank you. The documentation is very fragmented and incomplete in my opinion, strange for such a widely used tool. Awesome
does not seems like angular-way. You are trying to access dom element directly. Its jQuery way.
@RahulPrasad you're right. It's not the Angular Way. But it's the Only Way:)
In ui-router 1.0+, things have changed a little. This works for me: elem.inheritedData('$uiView').$cfg.viewDecl.$context. The state data is also available in $cfg.path, which is what ui-sref uses when it makes links. See the stateContext function: github.com/angular-ui/ui-router/blob/1.0.13/src/directives/…
@ChadvonNau I am trying to convert from angular 1 to angular 2+. My angular 1 is using this code. is there way to convert to angular 2+?
5

We can see what is defined for current state, using the $state.current, check this example showing:

state1 { "url": "/state1", "template": "<div>state1 <pre>{{current | json }}</pre><div ui-view=\"\"></div> </div>", "controller": "State1Ctrl", "name": "state1" } list { "url": "/list", "template": "<div>list <pre>{{current | json }}</pre></div>", "controller": "State1Ctrl", "name": "state1.list" } 

the controller:

.controller('State1Ctrl', function($scope, $state) { $scope.current = $state.current }); 

check that here

EXTEND: The above example will always return current state - i.e. if there is hierarchy of three states and we access the last state ('state1.list.detail') directly:

<a ui-sref="state1.list.detail({detailId:1})">.... 

Each controller will be provided with the same state: $state("state1.list.detail").

Why? beause this state has enough information what are all the views (hierarchically nested) and their controllers needed. We can observe that all in the

$state.$current // not .current 

Quickly discussed here cite:

In addition, users can attach custom decorators, which will generate new properties within the state's internal definition. There is currently no clear use-case for this beyond accessing internal states (i.e. $state.$current), however, expect this to become increasingly relevant as we introduce additional meta-programming features.

BUT: there is NO way, how to get information from current controller instance, to which $state it belongs! Even any iterations, searching through some $state.get('stateName') will be unreliable, because simply there is no kept relation that way. One controller Class could be used for many views as different Instances. And also, from my experience, I do not remember any case, when I needed to know such information... wish now it is a bit more clear

6 Comments

See response to user2992420 below
Please illustrate with a plunkr if you can :) I'm having a hard time implementing this in my own controller, thank you!
Try giving the child state it's own controller: plnkr.co/edit/Czc5kGpCwsruUQe2EanZ?p=preview. This is the issue I am running into
Actually, it doesn't matter. In your example it doesn't work either. Try navigating directly to /state1/list as soon as the page loads. It will show that /list is the "current" state in both controllers/templates.
I realized that my expalnation was not accurate previously. And I also realized that you decided to trust some obvious but in fact not accurate answer. Maybe the extension above will help. Please understand me correctly...my only goal is to help and improve our understanding of that amazing tool ui-router (our I mean including me;) good luck
|
4

This is useful if you are looking for Current state name, $state.current.name

Comments

2

Not sure it is the same version, but on 0.3.1 you can use this to get the current state:

$state.$current.name 

And to perform a check:

$state.is('contact.details.item'); 

Documentation: https://ui-router.github.io/ng1/docs/0.3.1/index.html#/api/ui.router.state.$state

Comments

2

A working "out of the box" Controller from your code, which shows state:

.controller('State1Ctrl', function ($state) { console.log("Current State: ", $state.current.name); }); 

Comments

1

If you want to check the current state

console.log("state", $state.current)

If you want to check the name of the current state name

console.log("statename", $state.current.name)

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.