javascript - 在 AngularJS 中突出显示当前事件菜单的正确方法是什么？

Question

我有一个路由器，当某些路由处于事件状态时 - 我显示正确的模板。但我的导航菜单与此不同步。将导航菜单与路由器同步的正确方法是什么？

我考虑过 NavigationCtrl，但我需要特殊服务，这将是其他 Controller 和导航之间的一层...

目前我的导航是这样的:

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

-编辑-

本·纳德尔做得很好 explaining Mapping AngularJS Routes Onto URL Parameters And Client-Side Events ，那么为什么要重新发明轮子呢？

这是the gist在全。

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>