Angular ui router ui-sref-active on parent

I have one parent state and many childs states. If I want the ui-sref-active on the parent to work when I am on one of the child I need to do this "hack":

我有一个父州和许多孩子州。如果我想让父母的ui-sref-active在我上一个孩子的时候工作,我需要这样做“hack”:

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

This is very ugly way and I have many children so its not seems like good solution. Anyone have another solution for this problem?

这是非常丑陋的方式,我有很多孩子,所以它似乎不是一个好的解决方案。任何人有这个问题的另一种解决方案

4 个解决方案

#1

You can check parent state only instead of checking all child states

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

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

#2

There is a UI-Router directive:

有一个UI-Router指令:

ui-sref-active="class-name-to-use"

which from a version 0.2.11 does exactly what we need:

从版本0.2.11中完全符合我们的要求:

uiSrefActive:

BREAKING CHANGE: Also activate for child states. (bf163ad, closes #818)
uiSrefActiveEq: new directive with old ui-sref-active behavior

BREAKING CHANGE:同时激活子状态。 (bf163ad,关闭#818)uiSrefActiveEq:具有旧的ui-sref-active行为的新指令

so, if we want just assign class for exact match, we have to use this: ui-sref-active-eq="class-name-to-use"

所以,如果我们只想为完全匹配分配类,我们必须使用它:ui-sref-active-eq =“class-name-to-use”

So, why are you experiencing: this is not working?

所以,你为什么要经历:这不起作用?

Because it is working only in conjunction with ui-sref directive.

因为它只与ui-sref指令一起使用。

There is a working plunker

有一个工作的plunker

These won't work as expected:

这些将无法按预期工作:

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

But these will be working:

但这些将起作用:

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

Check it in action here. Example uses this UI-Router 0.2.12 release - and this zip

在这里检查它。示例使用此UI-Router 0.2.12版本 - 此zip文件

EXTEND: Parent should be abstract, some of its children should always be selected

In that case, we can use another feature of the UI-Router, the: $urlRouterProvider.when().

在这种情况下,我们可以使用UI-Router的另一个功能:$ urlRouterProvider.when()。

There is extended plunker So, with state definition like this:

有扩展的plunker So,状态定义如下:

// 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'); 

So, now, always child is selected (even if navigating to parent) and parent is getting its ui-sref-active. Check it here

因此,现在,总是选择子项(即使导航到父项)并且父项正在获取其ui-sref-active。在这里查看

#3

Extending Radim Köhler's post. In case you are using an index state with an abstract parent state, such as

扩展RadimKöhler的帖子。如果您使用具有抽象父状态的索引状态,例如

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

… and want "Home" to be displayed as active when being on home.child1, you could make use of a CSS-hidden first ui-sref:

...并希望“Home”在home.child1上显示为活动状态,您可以使用CSS隐藏的第一个ui-sref:

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

This works since "ui-sref-active can live on the same element as ui-sref or on a parent element. The first ui-sref-active found at the same level or above the ui-sref will be used." per ui-sref-active reference

这是有效的,因为“ui-sref-active可以与ui-sref或父元素生成相同的元素。将使用在ui-sref相同级别或更高级别上找到的第一个ui-sref-active。” per ui-sref-active reference

See this plunker for a demo.

请参阅此plunker进行演示。

#4

ui-sref-active can take an object using a *[wild card] to match child states. This will work with abstract states.

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>

Learn more about the uiSrefActive directive

了解有关uiSrefActive指令的更多信息