在模板中访问 $state [英] Access $state inside template

问题描述

背景

我创建了一个应用程序，左侧有一个菜单，其中包含多个菜单项.当用户点击一个项目(或通过 URL 访问它)时，我想突出显示该项目(即在相应的

上应用类active").

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

我的尝试

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

<ul class="nav nav-sidebar"><li ng-class="{active: current=='container.item1'}"><a href="#/a/item1">项目 1</a>

<li ng-class="{active: current=='container.item2'}"><a href="#/a/item2">项目 2</a><li ng-class="{active: current=='container.item3'}"><a href="#/a/item3">项目 3</a>

在js方面:

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

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

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

(这不起作用)

有什么想法吗?

解决方案

最简单的方法是使用这个:

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

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

<h3>当前状态名称:<var>{{$state.current.name}}</var></h3><h5>参数</h5><pre>{{$stateParams |json}}</pre><h5>状态</h5><pre>{{$state.current |json}}</pre>

有一个例子

Background

I create an app with a menu on the left which contains several menu items. When the user clicks on an item (or access it via an URL), I want to highlight the item (i.e. apply the class 'active' on the corresponding <li>).

Note : I handle routes with ui.router.

What I tried

Up to now, I try to use a ng-class directive :

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

And on js side :

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

It works quite good but I wondered if it was possible to reference the state directly in the template, without having to handle manually the event. Something like :

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

(which does not work)

Any idea?

解决方案

The easy way is to use this:

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

and then anywhere we can access $state and $stateParams, for example like in this template:

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

There is an example

这篇关于在模板中访问 $state的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！