angularjs-ui路由器当前处于活动状态

angularjs ui-router is current state active

本文关键字：活动状态 路由器 angularjs-ui      更新时间：2023-09-26

我正在控制器中创建一个菜单。

$scope.menu = [
    {
        "title": "Home",
        "state": "app.home",
        "active": $state.is("app.home")
    },
    {
        "title": "Product",
        "state": "app.product",
        "active": $state.is("app.product")
    },
    {
        "title": "Category",
        "state": "app.category",
        "active":  $state.is("app.category")
    }
]

我设置了一个属性来指定活动状态。如果我的状态为当前状态，则活动属性将为true。

        <ul class="nav nav-pills nav-stacked">
             <li ng-repeat="item in menu" ng-class="{active:item.active}">
                <a ui-sref="{{item.state}}"> {{item.title}}</a>
            </li>
        </ul>

但当我改变状态时，活动属性不会被激发。

您建议的解决方案更正：

<ul class="nav nav-pills nav-stacked">
             <li ng-repeat="item in menu" ng-class="{active: $state.is('stateName')}">
                <a ui-sref="{{item.state}}"> {{item.title}}</a>
            </li>
 </ul>

或者您可以简单地使用ui sref active:

示例

给定以下模板：

<ul>
  <li ui-sref-active="active" class="item">
    <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
  </li>
</ul>

当应用程序状态为"app.user"（或任何子状态），并且包含值为"bilboaggins"的状态参数"user"时，生成的HTML将显示为（注意"活动"类）：

<ul>
  <li ui-sref-active="active" class="item active">
    <a ui-sref="app.user({user: 'bilbobaggins'})" href="/users/bilbobaggins">@bilbobaggins</a>
  </li>
</ul>

类名在指令链接时间内插值一次（对插值的任何进一步更改都将被忽略）。

可以以空格分隔的格式指定多个类别：

<ul>
  <li ui-sref-active='class1 class2 class3'>
    <a ui-sref="app.user">link</a>
  </li>
</ul>
相关文章：