Question

目前，我正在使用UI-Router来管理一组tab指令。通过标签，我的意思是这个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()

Answer 2

所以我终于得到了它的工作，谢谢大家。

我检查attrs.href的$ location.href（），并拆分sref以获取attrs.uiSref的stateName。

这种分裂是不可取的，但它是我现在能找到的最好的。

$rootScope.$on('$stateChangeSuccess', selectTabIfMatchesState);
function selectTabIfMatchesState() {
  //get rid of leading # if it exists, to match against $location.path()
  var href = $attr.href && $attr.href.replace(/^#/, '');

  //uiSref is laid out as 'stateName({params})', get only 'stateName'
  var stateName = $attr.uiSref && $attr.uiSref.split('(')[0];

  var includesState = stateName && $state.includes(stateName);
  var includesHref = href && $location.path().indexOf(href) === 0;

  if (includesHref || includesState) {
    // this tab matches current state, go to it!
    tabsCtrl.select($scope);
  }
}

AngularJS + UI-Router：查看href或ui-sref是否与状态匹配

2 个答案: