Javascript 角度ui路由器ui sref在父级上处于活动状态

我有一个父母州和许多孩子州。如果我想在我在其中一个子系统上时父系统上的

ui sref active

，我需要执行以下“hack”：

---

这是非常丑陋的方式，我有很多孩子，所以这似乎不是一个好的解决办法。有人有其他解决这个问题的方法吗

您只能检查父状态，而不是检查所有子状态

$scope.isActive = function() {  
   return $state.includes('playLotteries');
}

---

有一个

UI路由器

指令：

ui sref active=“要使用的类名”

从一个版本来看，它正是我们所需要的：

uiSrefActive: 中断更改：也为子状态激活。（bf163ad，关闭#818）
uiSrefActiveEq:具有旧ui sref活动行为的新指令

因此，如果我们只想为精确匹配分配类，我们必须使用以下命令：

ui sref active eq=“class name to use”

那么，你为什么要经历：这不起作用

因为它仅与

ui sref

指令一起工作。

有

这些将无法按预期工作：

// NOT working as expected
<a ui-sref-active="current" href="#/home">
<a ui-sref-active="current" href="#/home/child1">
<a ui-sref-active="current" href="#/home/child2">

---

因此，现在，总是选择子对象（即使导航到父对象），并且父对象的

ui sref处于活动状态

。检查它

延伸半径克勒柱。如果您正在使用，例如

这是因为“

ui-sref-active

可以与

ui-sref

位于同一元素上，或者位于父元素上。将使用在

ui-sref

相同级别或更高级别上找到的第一个

ui-sref-active

将被使用。”

---

有关演示，请参阅。

ui sref active

可以使用

*[通配符]

获取对象以匹配子状态。这将适用于抽象状态

<li ui-sref-active="{'active':'playLotteries.**'">
    <span>section</span>
    <ul>
        <li ui-sref-active="playLotteries.Index">
            <a ui-sref="playLotteries.Index">Index</a></li>
        <li ui-sref-active="playLotteries.Group">
            <a ui-sref="playLotteries.Group">Group</a></li>
        <li ui-sref-active="playLotteries.hunter">
            <a ui-sref="playLotteries.hunter">hunter</a></li>
    </ul>
</li>

部分


根据文档，“当ui sref的目标状态或任何子状态处于活动状态时，将激活”。请注意，上面写着“或任何子状态”您是否只检查父状态“返回$state.includes（'playtotteries'）”？这不起作用，只有默认的子路由使父级也处于活动状态，当我移动到其他子级时，其活动类处于活动状态gone@Asik这是可行的，你可以把它写下来作为答案。但是现在，如果我想将用户直接重定向到home.child1，而不是转到parent，因为parent中没有视图，这是不可行的。不确定你的意思是。你能给我看一下吗？你能更新我的plunker并显示出什么不起作用吗？如果我知道，我可以帮助解决你的问题…假设我有一个名为account的家长，在我的标签中有一些孩子，如个人信息、购买……所以当用户点击顶部导航栏中的我的帐户时，链接是：所以他直接转到这个子视图。老实说，我不确定我是否理解100%。但我创建了新的plunker并扩展了我的答案。因此，现在，虽然我们有父视图，但它的一个子视图总是被选中。
ui sref active
按预期工作……这有帮助吗？是的，这是问题的又一个解决方案，但我不知道我是否更喜欢这个答案ove.因为如果我更改url，那么我也需要小心并更改when方法，我注意到它会导致一些延迟，直到重定向发生，但非常感谢，我感谢你的帮助！这是我迄今为止在处理父抽象状态时找到的最佳解决方案。如果父抽象状态不是，最好使用ui-sref-active。请使用通配符匹配下面的答案
// conjunction ui-sref and ui-sref-active is working
<a ui-sref-active="current" ui-sref="home">
<a ui-sref-active="current" ui-sref="home.child1">
<a ui-sref-active="current" ui-sref="home.child2">

// when 'home' is selected ... 'home.child2' is used for redirection 
$urlRouterProvider.when('/home', '/home/child2');
// instead of 'other' - its 'other.child2' is used... could be any (e.g. other.child1)
$urlRouterProvider.when('/other', '/other/child2');

$urlRouterProvider.otherwise('/home/child2'); 

<a ui-sref-active="current" ui-sref="home.index">Home</a>
<a ui-sref-active="current" ui-sref="home.child1">Home » Child1</a>
<a ui-sref-active="current" ui-sref="home.child2">Home » Child2</a>

<li ui-sref-active="current">
  <a style="display:none" ui-sref="home"></a>
  <a ui-sref="home.index">Home</a>
</li>
<li ui-sref-active="current">
  <a ui-sref="home.child1">Home » Child1</a>
</li>
<li ui-sref-active="current">
  <a ui-sref="home.child2">Home » Child2</a>
</li>

<li ui-sref-active="{'active':'playLotteries.**'">
    <span>section</span>
    <ul>
        <li ui-sref-active="playLotteries.Index">
            <a ui-sref="playLotteries.Index">Index</a></li>
        <li ui-sref-active="playLotteries.Group">
            <a ui-sref="playLotteries.Group">Group</a></li>
        <li ui-sref-active="playLotteries.hunter">
            <a ui-sref="playLotteries.hunter">hunter</a></li>
    </ul>
</li>