如何使用angular-ui-utils将活动类应用于navbar?

Mel*_*eli 13 javascript angularjs angular-ui

我是angularJS的初学者,我正在使用node/bower/grunt为angularJS中的单页应用程序开发ui,我已经安装了angular-ui-bootstrap和来自angular-ui-utils的路由和事件工具.
我已经ng-class={active:$uiRoute}在菜单项上使用了但是当选择了一个菜单项时,没有应用活动类...是否$uiRoute处理了这个或者我是否需要单独编写它?

问一个愚蠢的问题道歉...
这是代码:

`<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li ui-route="/" ng-class="{active:$uiRoute}"><a href="#/">Home</a></li>
    <li ui-route="/about" ng-class="{active:$uiRoute}"><a href="#/about">About</a></li>
    <li ui-route="/other" ng-class="{active:$uiRoute}"><a href="#/other">Other</a></li>
  </ul>
</div>
...
<script src="bower_components/angular-ui-utils/modules/route/route.js"></script>
<script src="bower_components/angular-ui-utils/modules/event/event.js"></script>`
Run Code Online (Sandbox Code Playgroud)

和

angular.module('myApp', ['ngRoute','ngResource','ui.bootstrap'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })
  .when('/about', {
      templateUrl: 'views/about.html',
      controller: 'AboutCtrl'
  })
  .when('/other', {
    templateUrl: 'views/other.html',
    controller: 'OtherCtrl'
  })
  .otherwise({
    redirectTo: '/'
  });
})
Run Code Online (Sandbox Code Playgroud)

scn*_*iro 2

查看ui-utils 文档,看来您尚未注入模块依赖项。更改您的myApp注射方式ui.utils

angular.module('myApp', [
    'ngRoute',
    'ngResource',
    'ui.bootstrap',
    'ui.utils'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })
  .when('/about', {
      templateUrl: 'views/about.html',
      controller: 'AboutCtrl'
  })
  .when('/other', {
    templateUrl: 'views/other.html',
    controller: 'OtherCtrl'
  })
  .otherwise({
    redirectTo: '/'
  });
});
Run Code Online (Sandbox Code Playgroud)