在AngularJS中突出顯示當前活動菜單的正確方法是什麼？

Question

我有一個路由器，當某些路由處於活動狀態時 - 我顯示正確的模板。但我的導航菜單是不是與此同步..什麼是正確的方式來同步導航菜單與路由器？

我想過NavigationCtrl，但我需要特殊服務，這將是其他控制器和導航之間的層...

目前我的導航是類似的東西：

var app = angular.module('Money', []); 

app.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
    .when('/', { 
     templateUrl: 'general.html', 
     controller: 'GeneralCtrl' 
    }) 
    .when('/accounts', { 
     templateUrl: 'accounts.html', 
     controller: 'AccountsCtrl' 
    }); 
}]); 

app.controller('NavigationCtrl', ['$scope', '$rootScope', function ($scope, $rootScope) { 
    // nothing right now 
}]); 

app.controller('GeneralCtrl', ['$scope', function ($scope) { 
    $scope.model = { 
     title: 'General page!' 
    }; 
}]); 

app.controller('AccountsCtrl', ['$scope', function ($scope) { 
    $scope.model = { 
     title: 'Accounts page!' 
    }; 
}]); 

<div id="app" ng-app="Money"> 
    <div class="navbar navbar-inverse" ng-controller="NavigationCtrl"> 
    <div class="navbar-inner"> 
     <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </a> 
     <a class="brand" href="#">My money</a> 
     <div class="nav-collapse collapse navbar-responsive-collapse"> 
      <ul class="nav"> 
      <li class="active"><a href="#">General</a></li> 
      <li><a href="#accounts">Accounts</a></li> 
      </ul> 

      <ul class="nav pull-right"> 
      <li><a href="/logout">Sign out</a></li> 
      </ul> 
     </div><!-- /.nav-collapse --> 
     </div> 
    </div><!-- /navbar-inner --> 
    </div> 

    <ng-view></ng-view> 
</div> 

Answer 1

-Edit-

本Nadel做得很好explaining Mapping AngularJS Routes Onto URL Parameters And Client-Side Events，那麼爲什麼要重新發明輪子？

Here's the gist in full。

Line 166是更新在Line 44上的導航項目的ng-class值中使用的變量的函數。

---

您可以結合使用ng-class與檢查功能的$scope變量更新，想必當您更改路線。

$scope.isActive = function (url) { 
    if (url == "#" + $scope.activeRoute) { 
     return "on"; 
    } else { 
     return "off"; 
    } 
}; 

<ul class="nav" ng-cloak> 
    <li ng-repeat="button in navigation" ng-class="isActive(button.url)"> 
     {{button.text}} 
    </li> 
</ul>