1

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

我想过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>
4

1 回答 1

1

-编辑-

Ben Nadel 很好地解释了将 AngularJS 路由映射到 URL 参数和客户端事件，那么为什么要重新发明轮子呢？

这是完整的要点。

第 166 行是更新第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>
于 2013-03-21T21:45:00.383 回答