angularjs ui-router是當前狀態活動的

Question

我在控制器中創建一個菜單。

$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")
    }
]

我設置了一個屬性來指定活動狀態。 如果我的州是最新的，那么有效財產將是真實的。

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

但是當我改變狀態時，活動屬性不會被觸發。

Answer 1

建議的解決方案更正：

<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狀態為“app.user”（或任何子狀態），並且包含值為“bilbobaggins”的狀態參數“user”時，生成的HTML將顯示為（注意'active'類）：

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