>我有一个 Angular SPA 应用程序,其中完成了主路由导航,我让它突出显示正确的标题。
但是,当单击页面上的特定链接时,我现在需要将其突出显示为活动,我将知道该特定URL包含" 5">
当前如果此网址被命中
http://srpdop03/doc-home/#/coordinators
然后我用白色突出显示导航栏背景
<li ng-class="{ active: isActive('/coordinators')}"><a href="#/coordinators">Coordinators</a></li>
因此,在该协调器页面上,当我单击新闻链接时,新URL是
http://srpdop03/doc-home/#/tips/5?paginatePage=1
因此,在此索引中.html SPA应用程序 ,有没有办法轻松读取URL,并查看URL的这一特定部分
/tips/5
然后使 SAME - 协调员导航"活跃"?
索引中的 ng 控制器代码.html目前如下所示
<div ng-controller="TopNavCtrl" class="navbar">
<div class="container">
<ul class="nav">
<li ng-class="{ active: isActive('/')}"><a href="#/">DOC</a></li>
<li ng-class="{ active: isActive('/supervisors')}" ng-if="user.groups.DOC_SUPERVISORS || user.groups.DOC_BACKUP_SUPERVISORS">
<a href="#/supervisors">Supervisors</a>
</li>
<li ng-class="{ active: isActive('/dispatchers')}"><a href="#/dispatchers">Dispatchers</a></li>
<li ng-class="{ active: isActive('/coordinators')}"><a href="#/coordinators">Coordinators</a></li>
<li ng-class="{ active: isActive('/reliability')}"><a href="#/reliability">Reliability</a></li>
<li ng-class="{ active: isActive('/specialists')}"><a href="#/specialists">Specialists</a></li>
<li ng-class="{ active: isActive('/mapping')}"><a href="#/mapping">Mapping</a></li>
<li ng-class="{ active: isActive('/techs')}"><a href="#/techs">Cap Techs</a></li>
<!--<li ng-class="{ active: isActive('/applications')}"><a href="#/applications">BOA</a></li>-->
<li ng-class="{ active: isActive('/boa')}"><a href="#/boa">BOA</a></li>
</ul>
<ul class="nav-right">
<li ng-class="{ active: isActive('/user')}" ng-show="isAdmin()">
<a href="#/user"><b>{{ user.ntid }}</b></a>
</li>
<li ng-class="{ active: isActive('/')}" ng-show="!isAdmin()">
<a href="#/"><b>{{ user.ntid }}</b></a>
</li>
<!--<li>{{info.host}}</li>-->
</ul>
</div>
然后在app.js
app.controller('TopNavCtrl', function ($scope, $http, UserService, $location) {
$http.get('api/env')
.success(function (info) {
$scope.info = info;
UserService.get(function (err, user) {
$scope.user = user;
$scope.isActive = function (viewLocation) {
var active = (viewLocation === $location.path());
//var active = $location.path().indexOf(viewLocation) == 0;
return active;
};
$scope.isAdmin = function () {
return user.groups.WEB_ESO ||
info.env === 'development'
};
});
});
}(;
我正在看这篇文章http://webdesignerhut.com/active-class-navigation-menu/
这是jquery代码,我不确定如何改造自定义lastIndexOf等。
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
$("#nav ul li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})
});
添加 ui-router 作为依赖项。
UI-router特别擅长在导航菜单中显示活动状态。正如这里所记录的那样,ui 路由器的 ui-sref-active 有一个"主要用例是简化依赖 ui-sref 的导航菜单的特殊外观,通过让"活动"状态的菜单按钮看起来不同,将其与非活动菜单项区分开来。
在您的情况下,我会考虑做这样的事情:
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider,
$urlRouterProvider,){
add your routes here:
}]);
<ul>
<li ui-sref-active="active" class="item active">
<a ui-sref="app.user({user: 'anyone'})" href="/users/anyone">anyone</a>
</li>
</ul>