AngularJS + UI 路由器 : See if href or ui-sref matches a state

Question

所以目前，我正在使用 UI-Router 来管理一组选项卡指令。通过选项卡，我的意思是这个 UI 范式:http://www.hollance.com/wp-content/uploads/2011/11/Screenshot.png

每个标签都可以有一个 title , 一个 icon , 和 href或 ui-sref与之相关。

例子:

<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>

无论如何，主要问题是，当以编程方式或通过浏览器刷新更改状态时，我希望能够基于 ui-sref 知道要选择哪个选项卡。或 href属性。 $state.(is|includes|contains)似乎没有做我需要的:我不能给 $state.is href并询问它是否与当前状态匹配 - 我也不能给它一个 ui-sref。

我可以添加一个 stateName属性或类似的选项卡，但如果我不需要，我宁愿不这样做。

基本上，我希望能够在 tab 指令中做到这一点:

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

任何想法都可以做到这一点!

Answer 1

结帐下一个方法:

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

is()

contains()

includes()