Angularjs 在模板内访问$state

背景

我创建了一个应用程序，左侧有一个包含多个菜单项的菜单。当用户单击某个项目（或通过URL访问该项目）时，我想突出显示该项目（即，在相应的

上应用“active”类）

注意：我使用
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>

它工作得很好，但我想知道是否可以直接在模板中引用状态，而不必手动处理事件。比如：

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







（这不起作用）

有什么想法吗？
简单的方法是使用：

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


当前状态名称：{{$state.current.name}
params
{{$stateParams | json}
状态
{{$state.current | json}

人们对这种集中导航功能的方法非常感兴趣。谢谢拉迪姆
<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>