Sohan Shirodkar Sohan Shirodkar - 1 year ago 42
AngularJS Question

How to resolve a state from URL using ui-router?

If I have something like this:



Clicking on the element with the above attribute will trigger a state with URL something like this

For example,

Now my problem:

I have a list of tabs implemented using angular-material. Refer this plunk

When I click on
the state is
. When I click on
the state is
. All these state changes occur with click. But now if I manually change the URL, say I type in the address bar
, I want the corresponding state change to happen and
should be activated. At present, suppose I am on Tab3 and I manually change the URL to '..../tab/2', it doesn't activate Tab2, although the state is changed.

Is there a simple way to resolve states from the URL by considering the state parameters?

Answer Source

The main concern here is the use of tabs. The first tab belongs to one state and the remaining tabs belong to another state, each tab uniquely identified by an ID that is available through state parameter. So although the correct state is resolved when I manually change the URL, the correct tab is not not made active. The simplest workaround is to read in the state parameter using $stateParams and set the md-selected attribute of angular-material to activate the corresponding tab.