AngularJS UI-Router get the current state from within a view

angularjs get current state url
angularjs state
state angularjs
current state ui router
ui-sref
ui-router angularjs w3schools
angular get current route
ui-view

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.

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

Is there the way to get current state with given parameters? · Issue , <a ui-sref='section.page({section_slug: "{{ section.slug }}", page_slug: "promo"})'>​{{ <li ng-repeat="section in sections" ng-class="{ active: $state.current Main component --> <div ui-view ng-animate="{enter: 'animated  AngularJS UI-Router get the current state from within a view - Stack Overflow. Considering the following states taken from the ui-router documentation:.state('state1', { url: '/state1', templateUrl: 'partials/state1.html' controller: 'State1Ctrl'}).state('state1.lis Stack Overflow.

You can access the current state configuratin object like this:

$state.current

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

state.current is sometimes 'empty' · Issue #1627 · angular-ui/ui-router, Sometimes (I don't know why) $state.current returns an "empty" object: There's In view: uiState.current. Or: In controller: $rootScope.$state = $state I'm trying to get the $state.current in a directive, if i set a timeout works as i  I use the angularjs ui-router to establish the various states within an app. While I know I can go to the state from a link in the html (via ui-sref), is it possible to go to the state from within a controller? The code snippets below are a simple angularjs app to help illustrate my point. In the example below, I have two states:

You can do it as follow,

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

UI-Router for AngularJS (1.x) - Hello Solar System!, When the app is restarted, it will be in the same state as before. Plunker embeds can time out. If you get a “Not Found” response, your plunker embed has timed out. Click the ui-sref labeled “People” to view the list of all people. As you navigate through the app, the UI-Router State Visualizer shows the current state. The <ui-view> tag is a UI-Router viewport. When a state is activated, the state’s view (the template:) will be loaded into the viewport. Links. Add some ui-sref links. When clicked, the links will activate a state.

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

State.stateservice, Defined in ui-router-core/src/state/stateService.ts:81 This is a passthrough through to UIRouterGlobals.$current get current(): StateDeclaration. The current  UI-Router applications are modeled as a tree of states. Each application state (generally) has a view declared on it. The view is the component which provides the user interface for that state. When an application state is activated, the view (component) for that state is rendered.

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

State.stateprovider, A state corresponds to a "place" in the application in terms of the overall UI and navigation. A state describes (via the controller / template / view properties) what the UI When passing only a name, it returns the current (original or decorated)​  UI-Router States. The basic building block of a UI-Router application is a UI-Router state. A UI-Router state usually corresponds to a feature (or place) in the application in terms of the overall UI and navigation. Some examples of states might be dashboard, messages, shoppingcart, or blogentry. A state is a javascript object which has

Guide: Route to Component, AngularJS 1.5 component concepts; how to route to AngularJS 1.5 components A component gets its input data from a parent component using an explicit bindings to Additional services are also injected to wire up desired behavior in the view. In the state definition, replace the template / controller properties with a  UI-Router State based routing for client-side web apps . Get Started. AngularJS. Angular (2+) React. Follow:

[PDF] UI Router Cheatsheet, relationships within a state are defined by separating the name with a . (dot). string alias for an existing service or a promise. Allows you to set the scroll behavior when a ui-view is populated. ui-sref $state.get([stateName]) - returns the. Use nested states with the AngularJS UI-Router to simulate a multiple layout web application reducing repetitive code and promoting quality code.

AngularJS UI-Router get the current state from within a view , Considering the following states taken from the ui-router documentation: .state('​state1', { url: '/state1', templateUrl: 'partials/state1.html' controller: 'State1Ctrl' })  A function that is responsible for decorating the original builder function. The function receives two parameters: {object} - state - The state config object.

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/…
  • 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
  • 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