访问模板内的 $state

Question

背景

我创建了一个左侧菜单的应用程序，其中包含多个菜单项。当用户单击一个项目（或通过 URL 访问它）时，我想突出显示该项目（即在相应的<li> 上应用“活动”类）。

注意：我使用ui.router 处理路由。

我尝试了什么

到目前为止，我尝试使用ng-class 指令：

<div class="col-sm-3 col-md-2 sidebar">

<ul class="nav nav-sidebar">
  <li ng-class="{active: current=='container.item1'}">
    <a href="#/a/item1">Item 1</a>
  </li>
  <li ng-class="{active: current=='container.item2'}">
    <a href="#/a/item2">Item 2</a>
  </li>
  <li ng-class="{active: current=='container.item3'}">
    <a href="#/a/item3">Item 3</a>
  </li>
</ul>

在 js 方面：

.controller('container', function($scope, $rootScope, $state) {
  $rootScope.$on('$stateChangeSuccess',
      function(){
        $scope.current = $state.current.name;
      }
  )
})

效果很好，但我想知道是否可以直接在 模板 中引用状态，而无需手动处理事件。类似的东西：

<ul class="nav nav-sidebar">
  <li ng-class="{active: $state.current.name =='container.item1'}">
    <a href="#/a/item1">Item 1</a>
  </li>
  <li ng-class="{active: $state.current.name =='container.item2'}">
    <a href="#/a/item2">Item 2</a>
  </li>

（这不起作用）

有什么想法吗？

Answer 1

简单的方法是使用这个：

.run(['$rootScope', '$state', '$stateParams',
  function ($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
}])

然后我们可以访问$state 和$stateParams 的任何地方，例如在这个模板中：

<div >
  <h3>current state name: <var>{{$state.current.name}}</var></h3>


  <h5>params</h5>
  <pre>{{$stateParams | json}}</pre>
  <h5>state</h5>
  <pre>{{$state.current | json}}</pre>

</div>

有an example