AngularJS + UI-Router: See if href or ui-sref matches a state

Question

So currently, I am using UI-Router to manage a set of tab directives. By tabs, I mean this UI paradigm: http://www.hollance.com/wp-content/uploads/2011/11/Screenshot.png

Each tab is able to have a title, an icon, and a href or ui-sref associated with it.

Example:

<my-tabs>
  <my-tab title="Tab 1" href="#/tab1">
    Content when tab 1 is active!
  </my-tab>
  <my-tab title="Tab 2" ui-sref="tabs.numberTwo()">
    Content when tab 2 is active!
  </my-tab>
</my-tabs>

Anyway, the main issue is that when the state is changed programatically or through a browser refresh, I want to be able to know which tab to select, based on either the ui-sref or href attribute. $state.(is|includes|contains) don't seem to do what I need: I can't give $state.is a href and ask if it matches the current state - neither can I give it a ui-sref.

It's possible I could add a stateName attribute or the like to the tab as well, but I would rather not do that if I don't have to.

Basically, I would love to be able to do this in the tab directive:

$rootScope.$on('$stateChangeSuccess', function() {
   if ($state.matchesHref(attrs.href) || $state.matchesSref(attrs.uiSref)) {
    selectThisTab();
  }
});

Any ideas at all to do this would be welcome!

Answer 1

Checkout next methods:

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state

• is()
• contains()
• includes()