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 はMapping AngularJS Routes Onto URL Parameters And Client-Side Events について説明してくれました。

これが要旨の全文です。

行 166は、行 44ng-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 に答える