Làm cách nào để áp dụng lớp hoạt động cho thanh điều hướng bằng angular-ui-utils?

Question

Tôi là một người mới bắt đầu xếp hạng với angularJS và tôi đang phát triển ui cho một ứng dụng một trang trong angularJS bằng cách sử dụng nút/bower/grunt và tôi đã cài đặt angular-ui-bootstrap và tuyến đường và sự kiện utils từ angular-ui- utils.
Tôi đã sử dụng ng-class={active:$uiRoute} trên các mục menu nhưng khi một mục menu được chọn, lớp đang hoạt động không được áp dụng ... có $uiRoute xử lý việc này hay tôi cần mã riêng?

Xin lỗi cho hỏi một câu hỏi ngớ ngẩn ...
Đây là mã:

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

Và

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

Nhìn qua các ui-utils docs, dường như bạn chưa tiêm phụ thuộc module. Thay đổi myApp của bạn để tiêm 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

Tôi khuyên bạn sử dụng router tu UI với các quốc gia được đặt tên.

router sẽ của bạn trông giống như:

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

và bạn sẽ có thể chỉ sử dụng ui-sref chủ động trong mẫu của bạn như:

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