Question

我有这个nav.html：

<ul class="nav nav-pills pull-right">
  <li ng-class="{ active: $state.includes('home') }"><a ui-sref="home">Home</a></li>
  <li ng-class="{ active: $state.includes('about') }"><a ui-sref="about">About</a></li>
  <li ng-class="{ active: $state.includes('contact') }"><a ui-sref="contact">Contact</a></li>
</ul>
<h3 class="text-muted">my page title</h3>
</div

此控制器：

.module('app', [
    'ui.router'
])
.config(['$urlRouterProvider','$stateProvider', function($urlRouterProvider,$stateProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
.state('about', {
        url: '/about',
        templateUrl: 'templates/about.html',
        controller: 'aboutCtrl'
     })
  // and so forth

现在，当我单击导航中的按钮时，ui-router正确显示该页面并更改浏览器地址栏中的URL。然而，Bootstrap不会激活按钮，也就是选择它或将它变成灰色等。如何实现这种角度方式？

Answer 1

您必须确保在当前范围内定义/注入$state服务。您可能有一个navCtrl来处理导航栏html的渲染逻辑。请记住在nav.html：

中注入该控制器

<ul ng-controller = "navCtrl" class="nav nav-pills pull-right">

接下来，使用boolean在navCtrl内写一个$state.includes函数来检查当前状态：

.controller('navCtrl',['$scope','$state','$location',function($scope,$state,$location){  
   $scope.isState = function(states){
     return $state.includes(states);
   };
}])

最后在你的html中使用这个函数：

<li ng-class="{active: isState('home') }">
 <a ui-sref="home">Home</a>
</li>

这是working plnkr。

Angular.js，router-ui和Bootstrap：激活Clicked Button的状态

1 个答案: