angular-ui-utilsを使用してアクティブクラスをnavbarに適用するにはどうすればよいですか？

Question

私はangularJSのランク初心者です。ノード/ bower/gruntを使ってangularJSの単一ページアプリケーション用のUIを開発しています。角度-ui-bootstrapとangle-ui-ユーティリティ。
メニュー項目に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>` 

そして

ui-utils docsてみる

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

、あなたがモジュールの依存関係を注入していない表示されます。私はTUが名付けた状態でUIのルータを使用をアドバイス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

を注入するために、あなたのmyAppを変更します。

ルーターの意志は次のようになります。

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-SREFアクティブテンプレートで指示できるようになります：あなたは `ui.utils'を追加する必要が

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