AngularJSactiveは、現在のページのリンクにクラスを設定するのに何らかの形で役立ちますか？
これを行うには魔法のような方法があると思いますが、見つけられないようです。
私のメニューは次のようになります：
<ul>
<li><a class="active" href="/tasks">Tasks</a>
<li><a href="/actions">Tasks</a>
</ul>
そして、私は自分のルートにそれぞれのコントローラーを持っています：TasksControllerとActionsController。
aしかし、コントローラーへのリンクで「アクティブ」クラスをバインドする方法がわかりません。
ヒントはありますか？
ビューで
<a ng-class="getClass('/tasks')" href="/tasks">Tasks</a>
コントローラー上
$scope.getClass = function (path) {
return ($location.path().substr(0, path.length) === path) ? 'active' : '';
}
これにより、タスクリンクには、「/tasks」で始まるすべてのURLにアクティブなクラスが含まれます（例：「/ tasks / 1 / reports」）
リンクにディレクティブを使用することをお勧めします。
しかし、まだ完璧ではありません。シバンに気をつけろ;）
ディレクティブのJavaScriptは次のとおりです。
angular.module('link', []).
directive('activeLink', ['$location', function (location) {
return {
restrict: 'A',
link: function(scope, element, attrs, controller) {
var clazz = attrs.activeLink;
var path = attrs.href;
path = path.substring(1); //hack because path does not return including hashbang
scope.location = location;
scope.$watch('location.path()', function (newPath) {
if (path === newPath) {
element.addClass(clazz);
} else {
element.removeClass(clazz);
}
});
}
};
}]);
そしてこれがhtmlでどのように使われるかです：
<div ng-app="link">
<a href="#/one" active-link="active">One</a>
<a href="#/two" active-link="active">One</a>
<a href="#" active-link="active">home</a>
</div>
その後、cssでスタイリングします。
.active { color: red; }
これは、Angularでうまく機能する簡単なアプローチです。
<ul>
<li ng-class="{ active: isActive('/View1') }"><a href="#/View1">View 1</a></li>
<li ng-class="{ active: isActive('/View2') }"><a href="#/View2">View 2</a></li>
<li ng-class="{ active: isActive('/View3') }"><a href="#/View3">View 3</a></li>
</ul>
AngularJSコントローラー内：
$scope.isActive = function (viewLocation) {
var active = (viewLocation === $location.path());
return active;
};
このスレッドには、他にも同様の回答がいくつかあります。
議論に2セントを追加するだけで、純粋な角度モジュール（jQueryなし）を作成しました。これは、データを含むハッシュURLでも機能します。（例#/this/is/path?this=is&some=data）
モジュールを依存関係としてauto-active、メニューの祖先の1つに追加するだけです。このような：
<ul auto-active>
<li><a href="#/">main</a></li>
<li><a href="#/first">first</a></li>
<li><a href="#/second">second</a></li>
<li><a href="#/third">third</a></li>
</ul>
そして、モジュールは次のようになります。
(function () {
angular.module('autoActive', [])
.directive('autoActive', ['$location', function ($location) {
return {
restrict: 'A',
scope: false,
link: function (scope, element) {
function setActive() {
var path = $location.path();
if (path) {
angular.forEach(element.find('li'), function (li) {
var anchor = li.querySelector('a');
if (anchor.href.match('#' + path + '(?=\\?|$)')) {
angular.element(li).addClass('active');
} else {
angular.element(li).removeClass('active');
}
});
}
}
setActive();
scope.$on('$locationChangeSuccess', setActive);
}
}
}]);
}());
（もちろん、ディレクティブ部分を使用することもできます）
これは、少なくともまたは単に必要な空のハッシュ（たとえば、または単に）では機能しないことにも注意してexample.com/#ください。ただし、これはngResourceなどで自動的に行われます。example.comexample.com/#/example.com#/
そしてここにフィドルがあります：http：//jsfiddle.net/gy2an/8/
私の場合、ナビゲーションを担当する単純なコントローラーを作成することで、この問題を解決しました。
angular.module('DemoApp')
.controller('NavigationCtrl', ['$scope', '$location', function ($scope, $location) {
$scope.isCurrentPath = function (path) {
return $location.path() == path;
};
}]);
そして、次のように要素にng-classを追加するだけです。
<ul class="nav" ng-controller="NavigationCtrl">
<li ng-class="{ active: isCurrentPath('/') }"><a href="#/">Home</a></li>
<li ng-class="{ active: isCurrentPath('/about') }"><a href="#/about">About</a></li>
<li ng-class="{ active: isCurrentPath('/contact') }"><a href="#/contact">Contact</a></li>
</ul>
ng-class変数とcssクラスをバインドするディレクティブがあります。オブジェクト（classNameとbool値のペア）も受け入れます。
これが例です、http：//plnkr.co/edit/SWZAqj
@ Renan-tomal-fernandesからの回答は良いですが、正しく機能するにはいくつかの改善が必要でした。それがそうであったように、あなたが別のセクションにいたとしても、それは常にホームページ（/）へのリンクがトリガーされたものとして検出します。
だから私はそれを少し改善しました、これがコードです。Bootstrapを使用しているので、アクティブな部分はの<li>代わりに要素にあり<a>ます。
コントローラ
$scope.getClass = function(path) {
var cur_path = $location.path().substr(0, path.length);
if (cur_path == path) {
if($location.path().substr(0).length > 1 && path.length == 1 )
return "";
else
return "active";
} else {
return "";
}
}
レンプレート
<div class="nav-collapse collapse">
<ul class="nav">
<li ng-class="getClass('/')"><a href="#/">Home</a></li>
<li ng-class="getClass('/contents/')"><a href="#/contests/">Contents</a></li>
<li ng-class="getClass('/data/')"><a href="#/data/">Your data</a></li>
</ul>
</div>
上記の優れた提案のいくつかを読んだ後に私が思いついた解決策は次のとおりです。私の特定の状況では、Bootstrap tabsコンポーネントをメニューとして使用しようとしましたが、タブをメニューとして機能させ、各タブをブックマーク可能にするため、Angular-UIバージョンを使用したくありませんでした。タブが単一ページのナビゲーションとして機能するのではなく。（ブートストラップタブのAngular-UIバージョンがどのように見えるかに興味がある場合は、http：//angular-ui.github.io/bootstrap/#/tabsを参照してください）。
これを処理するための独自のディレクティブを作成するというkfisの回答は本当に気に入りましたが、すべてのリンクに配置する必要のあるディレクティブを用意するのは面倒なようでした。そこで、代わりにに一度配置される独自のAngularディレクティブを作成しましたul。他の誰かが同じことをしようとしている場合に備えて、私はそれをここに投稿すると思いましたが、私が言ったように、上記の解決策の多くは同様に機能します。これは、javascriptに関する限り、少し複雑なソリューションですが、最小限のマークアップで再利用可能なコンポーネントを作成します。
ディレクティブのjavascriptとルートプロバイダーは次のng:viewとおりです。
var app = angular.module('plunker', ['ui.bootstrap']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/One', {templateUrl: 'one.html'}).
when('/Two', {templateUrl: 'two.html'}).
when('/Three', {templateUrl: 'three.html'}).
otherwise({redirectTo: '/One'});
}]).
directive('navTabs', ['$location', function(location) {
return {
restrict: 'A',
link: function(scope, element) {
var $ul = $(element);
$ul.addClass("nav nav-tabs");
var $tabs = $ul.children();
var tabMap = {};
$tabs.each(function() {
var $li = $(this);
//Substring 1 to remove the # at the beginning (because location.path() below does not return the #)
tabMap[$li.find('a').attr('href').substring(1)] = $li;
});
scope.location = location;
scope.$watch('location.path()', function(newPath) {
$tabs.removeClass("active");
tabMap[newPath].addClass("active");
});
}
};
}]);
次に、HTMLで次のようにします。
<ul nav-tabs>
<li><a href="#/One">One</a></li>
<li><a href="#/Two">Two</a></li>
<li><a href="#/Three">Three</a></li>
</ul>
<ng:view><!-- Content will appear here --></ng:view>
これがそのためのプランカーです： http：//plnkr.co/edit/xwGtGqrT7kWoCKnGDHYN？p=preview 。
これは非常に簡単に実装できます。例を次に示します。
<div ng-controller="MenuCtrl">
<ul class="menu">
<li ng-class="menuClass('home')"><a href="#home">Page1</a></li>
<li ng-class="menuClass('about')"><a href="#about">Page2</a></li>
</ul>
</div>
そして、あなたのコントローラーはこれでなければなりません：
app.controller("MenuCtrl", function($scope, $location) {
$scope.menuClass = function(page) {
var current = $location.path().substring(1);
return page === current ? "active" : "";
};
});
angle-ui-routerのui-sref-activeディレクティブを使用する https://github.com/angular-ui/ui-router/wiki/Quick-Reference#statename
<ul>
<li ui-sref-active="active" class="item">
<a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
</li>
<!-- ... -->
</ul>Bootstrap4.1でのAngularバージョン6の使用
以下のようにできました。
以下の例では、URLに「/ contact」が表示されると、アクティブなブートストラップがhtmlタグに追加されます。URLが変更されると、削除されます。
<ul>
<li class="nav-item" routerLink="/contact" routerLinkActive="active">
<a class="nav-link" href="/contact">Contact</a>
</li>
</ul>
このディレクティブを使用すると、リンクのルートがアクティブになったときに要素にCSSクラスを追加できます。
AngularのWebサイトで詳細を読む
コントローラスコープの外にあるメニューでも同様の問題が発生しました。これが最善の解決策なのか推奨される解決策なのかはわかりませんが、これが私にとってはうまくいきました。アプリの構成に次のものを追加しました。
var app = angular.module('myApp');
app.run(function($rootScope, $location){
$rootScope.menuActive = function(url, exactMatch){
if (exactMatch){
return $location.path() == url;
}
else {
return $location.path().indexOf(url) == 0;
}
}
});
次に、私が持っているビューで：
<li><a href="/" ng-class="{true: 'active'}[menuActive('/', true)]">Home</a></li>
<li><a href="/register" ng-class="{true: 'active'}[menuActive('/register')]">
<li>...</li>
ディレクティブを使用すると（ここではDOM操作を行っているため）、「角度のある方法」で行うのにおそらく最も近いのは次のとおりです。
$scope.timeFilters = [
{'value':3600,'label':'1 hour'},
{'value':10800,'label':'3 hours'},
{'value':21600,'label':'6 hours'},
{'value':43200,'label':'12 hours'},
{'value':86400,'label':'24 hours'},
{'value':604800,'label':'1 week'}
]
angular.module('whatever', []).directive('filter',function(){
return{
restrict: 'A',
template: '<li ng-repeat="time in timeFilters" class="filterItem"><a ng-click="changeTimeFilter(time)">{{time.label}}</a></li>',
link: function linkFn(scope, lElement, attrs){
var menuContext = attrs.filter;
scope.changeTimeFilter = function(newTime){
scope.selectedtimefilter = newTime;
}
lElement.bind('click', function(cevent){
var currentSelection = angular.element(cevent.srcElement).parent();
var previousSelection = scope[menuContext];
if(previousSelection !== currentSelection){
if(previousSelection){
angular.element(previousSelection).removeClass('active')
}
scope[menuContext] = currentSelection;
scope.$apply(function(){
currentSelection.addClass('active');
})
}
})
}
}
})
その場合、HTMLは次のようになります。
<ul class="dropdown-menu" filter="times"></ul>
私はこのようにしました：
var myApp = angular.module('myApp', ['ngRoute']);
myApp.directive('trackActive', function($location) {
function link(scope, element, attrs){
scope.$watch(function() {
return $location.path();
}, function(){
var links = element.find('a');
links.removeClass('active');
angular.forEach(links, function(value){
var a = angular.element(value);
if (a.attr('href') == '#' + $location.path() ){
a.addClass('active');
}
});
});
}
return {link: link};
});
これにより、track-activeディレクティブがあるセクションにリンクを含めることができます。
<nav track-active>
<a href="#/">Page 1</a>
<a href="#/page2">Page 2</a>
<a href="#/page3">Page 3</a>
</nav>
このアプローチは、私には他のアプローチよりもはるかにクリーンに思えます。
また、jQueryを使用している場合は、jQliteが基本的なセレクターをサポートしているだけなので、jQueryを非常にすっきりさせることができます。角度インクルードの前にjqueryが含まれている、はるかにクリーンなバージョンは次のようになります。
myApp.directive('trackActive', function($location) {
function link(scope, element, attrs){
scope.$watch(function() {
return $location.path();
}, function(){
element.find('a').removeClass('active').find('[href="#'+$location.path()+'"]').addClass('active');
});
}
return {link: link};
});
この問題に対する私の解決策route.currentは、Angularテンプレートで使用します。
メニューで強調表示するルートがあるので、モジュールによって宣言されたルートに/tasks独自のプロパティを追加できます。menuItem
$routeProvider.
when('/tasks', {
menuItem: 'TASKS',
templateUrl: 'my-templates/tasks.html',
controller: 'TasksController'
);
次に、テンプレートで次のディレクティブtasks.htmlを使用できます。ng-class
<a href="app.html#/tasks"
ng-class="{active : route.current.menuItem === 'TASKS'}">Tasks</a>
私の意見では、これは提案されたすべてのソリューションよりもはるかにクリーンです。
これは、さまざまなレベルのパスマッチングを可能にするために行ったkfisディレクティブの拡張です。基本的に、完全に一致させるとネストやデフォルトの状態リダイレクトができないため、特定の深さまでURLパスを一致させる必要があることがわかりました。お役に立てれば。
.directive('selectedLink', ['$location', function(location) {
return {
restrict: 'A',
scope:{
selectedLink : '='
},
link: function(scope, element, attrs, controller) {
var level = scope.selectedLink;
var path = attrs.href;
path = path.substring(1); //hack because path does not return including hashbang
scope.location = location;
scope.$watch('location.path()', function(newPath) {
var i=0;
p = path.split('/');
n = newPath.split('/');
for( i ; i < p.length; i++) {
if( p[i] == 'undefined' || n[i] == 'undefined' || (p[i] != n[i]) ) break;
}
if ( (i-1) >= level) {
element.addClass("selected");
}
else {
element.removeClass("selected");
}
});
}
};
}]);
そして、これが私がリンクを使用する方法です
<nav>
<a href="#/info/project/list" selected-link="2">Project</a>
<a href="#/info/company/list" selected-link="2">Company</a>
<a href="#/info/person/list" selected-link="2">Person</a>
</nav>
このディレクティブは、ディレクティブの属性値で指定された深度レベルと一致します。ただ、他の場所で何度も使用できることを意味します。
これは、アクティブなリンクを強調表示するためのさらに別のディレクティブです。
.directive('activeLink', ['$location',
function($location) {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
var path = attrs.activeLink ? 'activeLink' : 'href';
var target = angular.isDefined(attrs.activeLinkParent) ? elem.parent() : elem;
var disabled = angular.isDefined(attrs.activeLinkDisabled) ? true : false;
var nested = angular.isDefined(attrs.activeLinkNested) ? true : false;
function inPath(needle, haystack) {
var current = (haystack == needle);
if (nested) {
current |= (haystack.indexOf(needle + '/') == 0);
}
return current;
}
function toggleClass(linkPath, locationPath) {
// remove hash prefix and trailing slashes
linkPath = linkPath ? linkPath.replace(/^#!/, '').replace(/\/+$/, '') : '';
locationPath = locationPath.replace(/\/+$/, '');
if (linkPath && inPath(linkPath, locationPath)) {
target.addClass('active');
if (disabled) {
target.removeClass('disabled');
}
} else {
target.removeClass('active');
if (disabled) {
target.addClass('disabled');
}
}
}
// watch if attribute value changes / evaluated
attrs.$observe(path, function(linkPath) {
toggleClass(linkPath, $location.path());
});
// watch if location changes
scope.$watch(
function() {
return $location.path();
},
function(newPath) {
toggleClass(attrs[path], newPath);
}
);
}
};
}
]);
角度式を使用した簡単な例。たとえば、$ scope.var = 2とすると、場所が/ url / 2の場合、リンクがアクティブになります。
<a href="#!/url/{{var}}" active-link>
ブートストラップの例では、親liはアクティブクラスを取得します。
<li>
<a href="#!/url" active-link active-link-parent>
</li>
ネストされたURLの例では、ネストされたURLがアクティブな場合（つまり、 / url / 1、/ url / 2、url / 1/2 / ...） 、リンクがアクティブになります。
<a href="#!/url" active-link active-link-nested>
複雑な例では、リンクは1つのURL（/ url1）を指していますが、別のURL（/ url2）が選択されている場合はアクティブになります。
<a href="#!/url1" active-link="#!/url2" active-link-nested>
リンクが無効になっている例。アクティブでない場合は、「無効」クラスになります。
<a href="#!/url" active-link active-link-disabled>
すべてのactive-link-*属性は任意の組み合わせで使用できるため、非常に複雑な条件を実装できます。
個々のリンクを選択するのではなく、ラッパーでディレクティブのリンクが必要な場合（Batarangでスコープを確認しやすくなります）、これも非常にうまく機能します。
angular.module("app").directive("navigation", [
"$location", function($location) {
return {
restrict: 'A',
scope: {},
link: function(scope, element) {
var classSelected, navLinks;
scope.location = $location;
classSelected = 'selected';
navLinks = element.find('a');
scope.$watch('location.path()', function(newPath) {
var el;
el = navLinks.filter('[href="' + newPath + '"]');
navLinks.not(el).closest('li').removeClass(classSelected);
return el.closest('li').addClass(classSelected);
});
}
};
}
]);
マークアップは次のようになります。
<nav role="navigation" data-navigation>
<ul>
<li><a href="/messages">Messages</a></li>
<li><a href="/help">Help</a></li>
<li><a href="/details">Details</a></li>
</ul>
</nav>
この例では「full-fat」jQueryを使用していることにも言及する必要がありますが、フィルタリングなどで行ったことを簡単に変更できます。
これが私の2セントです。これは問題なく機能します。
注：これは子ページとは一致しません（これは私が必要としていたものです）。
意見：
<a ng-class="{active: isCurrentLocation('/my-path')}" href="/my-path" >
Some link
</a>
コントローラ：
// make sure you inject $location as a dependency
$scope.isCurrentLocation = function(path){
return path === $location.path()
}
@kfisの回答によると、それはコメントであり、私の推奨事項は、次のような最終的なディレクティブです。
.directive('activeLink', ['$location', function (location) {
return {
restrict: 'A',
link: function(scope, element, attrs, controller) {
var clazz = attrs.activeLink;
var path = attrs.href||attrs.ngHref;
path = path.substring(1); //hack because path does not return including hashbang
scope.location = location;
scope.$watch('window.location.href', function () {
var newPath = (window.location.pathname + window.location.search).substr(1);
if (path === newPath) {
element.addClass(clazz);
} else {
element.removeClass(clazz);
}
});
}
};
}]);
そしてこれがhtmlでどのように使われるかです：
<div ng-app="link"> <a href="#/one" active-link="active">One</a> <a href="#/two" active-link="active">One</a> <a href="#" active-link="active">home</a> </div>その後、cssでスタイリングします。
.active { color: red; }
ui-routerを使用している人にとって、私の答えはEnder2050の答えにいくぶん似ていますが、州名のテストを介してこれを行うことを好みます。
$scope.isActive = function (stateName) {
var active = (stateName === $state.current.name);
return active;
};
対応するHTML：
<ul class="nav nav-sidebar">
<li ng-class="{ active: isActive('app.home') }"><a ui-sref="app.home">Dashboard</a></li>
<li ng-class="{ active: isActive('app.tiles') }"><a ui-sref="app.tiles">Tiles</a></li>
</ul>
上記の指示の提案はどれも私には役に立ちませんでした。このようなブートストラップナビゲーションバーがある場合
<ul class="nav navbar-nav">
<li><a ng-href="#/">Home</a></li>
<li><a ng-href="#/about">About</a></li>
...
</ul>
（これは$ yo angularスタートアップの可能性があります）次に、要素自体ではなく、親要素のクラスリストに追加.activeします。すなわち。だから私はこれを書いた： <li><li class="active">..</li>
.directive('setParentActive', ['$location', function($location) {
return {
restrict: 'A',
link: function(scope, element, attrs, controller) {
var classActive = attrs.setParentActive || 'active',
path = attrs.ngHref.replace('#', '');
scope.location = $location;
scope.$watch('location.path()', function(newPath) {
if (path == newPath) {
element.parent().addClass(classActive);
} else {
element.parent().removeClass(classActive);
}
})
}
}
}])
使用法set-parent-active; .activeデフォルトなので、設定する必要はありません
<li><a ng-href="#/about" set-parent-active>About</a></li>
親<li>要素は.active、リンクがアクティブなときになります。のような代替.activeクラスを使用するには.highlight、単に
<li><a ng-href="#/about" set-parent-active="highlight">About</a></li>
私にとって最も重要なのは、ブートストラップのデフォルトコードをまったく変更しないことでした。これが私のメニューコントローラーで、メニューオプションを検索し、必要な動作を追加します。
file: header.js
function HeaderCtrl ($scope, $http, $location) {
$scope.menuLinkList = [];
defineFunctions($scope);
addOnClickEventsToMenuOptions($scope, $location);
}
function defineFunctions ($scope) {
$scope.menuOptionOnClickFunction = function () {
for ( var index in $scope.menuLinkList) {
var link = $scope.menuLinkList[index];
if (this.hash === link.hash) {
link.parentElement.className = 'active';
} else {
link.parentElement.className = '';
}
}
};
}
function addOnClickEventsToMenuOptions ($scope, $location) {
var liList = angular.element.find('li');
for ( var index in liList) {
var liElement = liList[index];
var link = liElement.firstChild;
link.onclick = $scope.menuOptionOnClickFunction;
$scope.menuLinkList.push(link);
var path = link.hash.replace("#", "");
if ($location.path() === path) {
link.parentElement.className = 'active';
}
}
}
<script src="resources/js/app/header.js"></script>
<div class="navbar navbar-fixed-top" ng:controller="HeaderCtrl">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#"> <img src="resources/img/fom-logo.png"
style="width: 80px; height: auto;">
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#/platforms">PLATFORMS</a></li>
<li><a href="#/functionaltests">FUNCTIONAL TESTS</a></li>
</ul>
</div>
</div>
</div>
</div>
同じ問題がありました。これが私の解決策です：
.directive('whenActive',
[
'$location',
($location)->
scope: true,
link: (scope, element, attr)->
scope.$on '$routeChangeSuccess',
() ->
loc = "#"+$location.path()
href = element.attr('href')
state = href.indexOf(loc)
substate = -1
if href.length > 3
substate = loc.indexOf(href)
if loc.length is 2
state = -1
#console.log "Is Loc: "+loc+" in Href: "+href+" = "+state+" and Substate = "+substate
if state isnt -1 or substate isnt -1
element.addClass 'selected'
element.parent().addClass 'current-menu-item'
else if href is '#' and loc is '#/'
element.addClass 'selected'
element.parent().addClass 'current-menu-item'
else
element.removeClass 'selected'
element.parent().removeClass 'current-menu-item'
])
このためのディレクティブを作成しました。
使用法：
<ul class="nav navbar-nav">
<li active><a href="#/link1">Link 1</a></li>
<li active><a href="#/link2">Link 2</a></li>
</ul>
実装：
angular.module('appName')
.directive('active', function ($location, $timeout) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
// Whenever the user navigates to a different page...
scope.$on('$routeChangeSuccess', function () {
// Defer for other directives to load first; this is important
// so that in case other directives are used that this directive
// depends on, such as ng-href, the href is evaluated before
// it's checked here.
$timeout(function () {
// Find link inside li element
var $link = element.children('a').first();
// Get current location
var currentPath = $location.path();
// Get location the link is pointing to
var linkPath = $link.attr('href').split('#').pop();
// If they are the same, it means the user is currently
// on the same page the link would point to, so it should
// be marked as such
if (currentPath === linkPath) {
$(element).addClass('active');
} else {
// If they're not the same, a li element that is currently
// marked as active needs to be "un-marked"
element.removeClass('active');
}
});
});
}
};
});
テスト：
'use strict';
describe('Directive: active', function () {
// load the directive's module
beforeEach(module('appName'));
var element,
scope,
location,
compile,
rootScope,
timeout;
beforeEach(inject(function ($rootScope, $location, $compile, $timeout) {
scope = $rootScope.$new();
location = $location;
compile = $compile;
rootScope = $rootScope;
timeout = $timeout;
}));
describe('with an active link', function () {
beforeEach(function () {
// Trigger location change
location.path('/foo');
});
describe('href', function () {
beforeEach(function () {
// Create and compile element with directive; note that the link
// is the same as the current location after the location change.
element = angular.element('<li active><a href="#/foo">Foo</a></li>');
element = compile(element)(scope);
// Broadcast location change; the directive waits for this signal
rootScope.$broadcast('$routeChangeSuccess');
// Flush timeout so we don't have to write asynchronous tests.
// The directive defers any action using a timeout so that other
// directives it might depend on, such as ng-href, are evaluated
// beforehand.
timeout.flush();
});
it('adds the class "active" to the li', function () {
expect(element.hasClass('active')).toBeTruthy();
});
});
describe('ng-href', function () {
beforeEach(function () {
// Create and compile element with directive; note that the link
// is the same as the current location after the location change;
// however this time with an ng-href instead of an href.
element = angular.element('<li active><a ng-href="#/foo">Foo</a></li>');
element = compile(element)(scope);
// Broadcast location change; the directive waits for this signal
rootScope.$broadcast('$routeChangeSuccess');
// Flush timeout so we don't have to write asynchronous tests.
// The directive defers any action using a timeout so that other
// directives it might depend on, such as ng-href, are evaluated
// beforehand.
timeout.flush();
});
it('also works with ng-href', function () {
expect(element.hasClass('active')).toBeTruthy();
});
});
});
describe('with an inactive link', function () {
beforeEach(function () {
// Trigger location change
location.path('/bar');
// Create and compile element with directive; note that the link
// is the NOT same as the current location after the location change.
element = angular.element('<li active><a href="#/foo">Foo</a></li>');
element = compile(element)(scope);
// Broadcast location change; the directive waits for this signal
rootScope.$broadcast('$routeChangeSuccess');
// Flush timeout so we don't have to write asynchronous tests.
// The directive defers any action using a timeout so that other
// directives it might depend on, such as ng-href, are evaluated
// beforehand.
timeout.flush();
});
it('does not add the class "active" to the li', function () {
expect(element.hasClass('active')).not.toBeTruthy();
});
});
describe('with a formerly active link', function () {
beforeEach(function () {
// Trigger location change
location.path('/bar');
// Create and compile element with directive; note that the link
// is the same as the current location after the location change.
// Also not that the li element already has the class "active".
// This is to make sure that a link that is active right now will
// not be active anymore when the user navigates somewhere else.
element = angular.element('<li class="active" active><a href="#/foo">Foo</a></li>');
element = compile(element)(scope);
// Broadcast location change; the directive waits for this signal
rootScope.$broadcast('$routeChangeSuccess');
// Flush timeout so we don't have to write asynchronous tests.
// The directive defers any action using a timeout so that other
// directives it might depend on, such as ng-href, are evaluated
// beforehand.
timeout.flush();
});
it('removes the "active" class from the li', function () {
expect(element.hasClass('active')).not.toBeTruthy();
});
});
});
ルート：
$routeProvider.when('/Account/', { templateUrl: '/Home/Account', controller: 'HomeController' });
メニューhtml：
<li id="liInicio" ng-class="{'active':url=='account'}">
コントローラー：
angular.module('Home').controller('HomeController', function ($scope, $http, $location) {
$scope.url = $location.url().replace(/\//g, "").toLowerCase();
...
ここで見つけた問題は、ページ全体が読み込まれたときにのみメニュー項目がアクティブになることです。部分ビューがロードされても、メニューは変更されません。なぜそれが起こるのか誰かが知っていますか？
$scope.getClass = function (path) {
return String(($location.absUrl().split('?')[0]).indexOf(path)) > -1 ? 'active' : ''
}
<li class="listing-head" ng-class="getClass('/v/bookings')"><a href="/v/bookings">MY BOOKING</a></li>
<li class="listing-head" ng-class="getClass('/v/fleets')"><a href="/v/fleets">MY FLEET</a></li>
<li class="listing-head" ng-class="getClass('/v/adddriver')"><a href="/v/adddriver">ADD DRIVER</a></li>
<li class="listing-head" ng-class="getClass('/v/bookings')"><a href="/v/invoice">INVOICE</a></li>
<li class="listing-head" ng-class="getClass('/v/profile')"><a href="/v/profile">MY PROFILE</a></li>
<li class="listing-head"><a href="/v/logout">LOG OUT</a></li>
私は最も簡単な解決策を見つけました。HTMLのindexOfを比較するだけです
var myApp = angular.module('myApp', []);
myApp.run(function($rootScope) {
$rootScope.$on("$locationChangeStart", function(event, next, current) {
$rootScope.isCurrentPath = $location.path();
});
});
<li class="{{isCurrentPath.indexOf('help')>-1 ? 'active' : '' }}">
<a href="/#/help/">
Help
</a>
</li>