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

- 编辑 -

Ben Nadel表现出色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>

在AngularJS中突出显示当前活动菜单的正确方法是什么？

1 个答案: