何よりもまず、この問題はさまざまな方法で解決できます。この方法は最もエレガントではないかもしれませんが、確実に機能します。
以下は、どのプロジェクトにも追加できる簡単なソリューションです。キーをオフにするために使用できるルートを構成するときに、「pageKey」またはその他のプロパティを追加できます。さらに、$ routeオブジェクトの$ routeChangeSuccessメソッドにリスナーを実装して、ルート変更の正常な完了をリッスンできます。
ハンドラーが起動すると、ページキーを取得し、そのキーを使用して、このページで "ACTIVE"である必要がある要素を見つけ、ACTIVEクラスを適用します。
すべての要素を「アクティブ」にする方法が必要であることを覚えておいてください。ご覧のとおり、ナビゲーションアイテムで.pageKeyクラスを使用してそれらをすべてオフにし、.pageKey_ {PAGEKEY}を使用して個別にオンにしています。それらをすべて非アクティブに切り替えると、単純なアプローチと見なされます。以前のルートを使用してアクティブアイテムのみを非アクティブにすると、パフォーマンスが向上する可能性があります。または、jqueryセレクターを変更して、非アクティブにするアクティブアイテムのみを選択することもできます。jqueryを使用してすべてのアクティブな項目を選択することは、前のルートに存在する可能性のあるcssバグが発生した場合に、現在のルートのすべてがクリーンアップされるため、おそらく最良のソリューションです。
つまり、次のコード行を変更することになります。
$(".pagekey").toggleClass("active", false);
これに
$(".active").toggleClass("active", false);
ここにいくつかのサンプルコードがあります：
のブートストラップnavbarを考えると
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li><a href="#!/" class="pagekey pagekey_HOME">Home</a></li>
<li><a href="#!/page1/create" class="pagekey pagekey_CREATE">Page 1 Create</a></li>
<li><a href="#!/page1/edit/1" class="pagekey pagekey_EDIT">Page 1 Edit</a></li>
<li><a href="#!/page1/published/1" class="pagekey pagekey_PUBLISH">Page 1 Published</a></li>
</ul>
</div>
</div>
そして次のような角度モジュールとコントローラー：
<script type="text/javascript">
function Ctrl($scope, $http, $routeParams, $location, $route) {
}
angular.module('BookingFormBuilder', []).
config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
template: 'I\'m on the home page',
controller: Ctrl,
pageKey: 'HOME' }).
when('/page1/create', {
template: 'I\'m on page 1 create',
controller: Ctrl,
pageKey: 'CREATE' }).
when('/page1/edit/:id', {
template: 'I\'m on page 1 edit {id}',
controller: Ctrl, pageKey: 'EDIT' }).
when('/page1/published/:id', {
template: 'I\'m on page 1 publish {id}',
controller: Ctrl, pageKey: 'PUBLISH' }).
otherwise({ redirectTo: '/' });
$locationProvider.hashPrefix("!");
}).run(function ($rootScope, $http, $route) {
$rootScope.$on("$routeChangeSuccess",
function (angularEvent,
currentRoute,
previousRoute) {
var pageKey = currentRoute.pageKey;
$(".pagekey").toggleClass("active", false);
$(".pagekey_" + pageKey).toggleClass("active", true);
});
});
</script>