如何使用angular-ui-utils將活動類應用於導航欄？

Question

我是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>` 

而且

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: '/' 
    }); 
}) 

Answer 1

通過ui-utils docs看，它似乎還沒有注入模塊依賴。更改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: '/' 
    }); 
}); 

Answer 2

add ng-class="{'active':isActive('/about')}" 

.run([ '$rootScope', '$location', function($rootScope, $location,) { 
    $rootScope.isActive = function(path) { 
     if ($location.path() && $location.path().substring(0, path.length) == path) { 
      return true; 
     } 
     return false; 
    } 
} 

Answer 3

我勸你TU使用UI路由器命名狀態。

你的路由器將是這樣的：

angular 
    .module('myApp', ['ui.router']) 
    .config(($stateProvider, urlRouterProvider) => { 
    $stateProvider 
     .state('index', { 
     url: '/', 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl', 
     }) 
     .state('index.about', { 
     url: 'about/' 
     templateUrl: 'views/about.html', 
     controller: 'AboutCtrl' 
     }); 
    $urlRouterProvider.otherwise('/'); 
    }); 

，你將能夠用戶UI-S REF-活躍指令在你的模板，如：

<div class="collapse navbar-collapse"> 
    <ul class="nav navbar-nav"> 
    <li ui-sref-active="{ 'active': 'index' }"> 
     <a href="" ui-sref="index">Home</a> 
    </li> 
    <li ui-sref-active="{ 'active': 'index.about' }"> 
     <a href="" ui-sref="index.about">About</a> 
    </li> 
    </ul> 
</div>