Angularjs 角度：根据当前状态添加.活动类

我试图根据当前状态将

.active

类添加到导航选项卡中，但由于该状态具有

:id

，因此将该类

active

添加到多个选项卡中

我的州看起来是这样的：

$stateProvider
  .state('genre', {
      url: "/movie/genre/:id",
      templateUrl: "views/movie/genre.html",
  });

我在标记上使用

ui-sref

和

ui-sref-active

，如下所示：

<li ui-sref="genre" ui-sref-active="active">
    <a href="#/movie/genre/horror">Horror</a>
</li>
<li ui-sref="genre" ui-sref-active="active">
    <a href="#/movie/genre/romance">Horror</a>
</li>
...

...

因此，尽管我在

site.com/movie/genre/horror

，但我在两个选项卡上都获得了

.active

类，而不仅仅是恐怖页面

在此方面的任何帮助都将不胜感激

---

提前谢谢

您不必使用

href

，您必须使用ui路由器状态进行导航。在这种情况下，您必须在

ui sref

中传递参数。然后扔掉它

ui-sref="genre({id:'horror'})"

---

该类将应用于您的活动状态。您的状态为“流派”，这对于您的ui sref属性都是活动的

我做了一个应该对你有用的东西

恐怖


浪漫

您可以摆脱

li

上的

ui sref

。只是需要放在锚上。啊，你说得对。我不希望该类应用于作为具有ui sref指令的元素的父元素的元素。我在答案和plunkr.Perfect@PaulPodlech中改变了这一点。这正是我想要的。也谢谢你，马特！

<li ui-sref-active="active">
  <a ui-sref="genre({id: 'horror'})">Horror</a>
</li>
<li ui-sref-active="active">
  <a ui-sref="genre({id: 'romance'})">romance</a>
</li>