我正在为不同的状态使用 angularjs 来处理局部 View 网页。
这是我的主页，我将在其中加载所有局部 View 。我有一个侧面导航栏，用于在 View 中导航负载:
!DOCTYPE html>
<html>
<head>
<title>Settings</title>
</head>
<body>
<div class="container-fluid">
<div id="sidebar" class="sideStyle">
<ul id="navList" class="nav nav-sidebar">
<li class="active"><a data-ui-sref="settings.defaults">Defaults</a></li>
<li><a data-ui-sref="settings.carriers"> Carriers</a></li>
<li><a data-ui-sref="settings.trailers"> Trailers</a></li>
<li><a data-ui-sref="settings.shifts">Shop Shifts</a></li>
<li><a data-ui-sref="settings.bccap">Bend Class Capacities</a></li>
</ul>
</div>
<div id="main" class="mainContent" style="padding-top:15px">
<button onclick="toggleNav()" type="button" class="btn btn-default btn-xs " id="btnToggle">
<span class="toggleClass glyphicon glyphicon-chevron-left"></span>
</button>
<div>
<div data-ui-view=""></div> //where page is loaded in
</div>
</div>
</div>
<script src="AppScripts/Sidebar.js"></script>
</body>
</html>
下面是 Sidebar.js:
var toggle, mainLeft;
function toggleNav() {
if (toggle == 0) {
toggle = 1;
$("#sidebar").toggle('slide');
$("#main").animate({
left: "10",
}, 350, function () { });
$('.mainContent').animate({ width: '100%' }, 500);
$('.toggleClass').addClass('glyphicon-chevron-right').removeClass('glyphicon-chevron-left');
}
else {
toggle = 0;
$("#sidebar").toggle('slide');
$("#main").animate({
left: mainLeft,
}, 350, function () { });
$('.mainContent').animate({ width: '85%' }, 500);
$('.toggleClass').addClass('glyphicon-chevron-left').removeClass('glyphicon-chevron-right');
}
}
$(document).ready(function () {
var left = $('#sidebar').width();
mainLeft = left + 50;
$('#main').css({ left: mainLeft });
toggle = 0;
$('#btnToggle span').addClass('glyphicon glyphicon-chevron-left');
});
$(document).ready(function () {
$('#navList li').click(function () {
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
});
});
还有我的导航 CSS:
/* Sidebar navigation */
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
color:#8b6d80;
}
.nav-sidebar > .active > a {
color: #fff;
background-color: #8b6d80;
}
.listItem {
background-color:whitesmoke;
font-size:medium;
}
.selectedItem {
border-left:solid 5px;
border-color:#8b6d80;
background-color:#EEEEEE;
font-size:medium;
}
我正在使用 CSS 类“active”设置点击的链接，以明确他们点击了哪个链接。 Angularjs 非常好，它可以记住用户的面包屑，并在使用后退按钮时负责加载正确的页面。但是，由于我的导航位于 shell 页面而不是部分 View 中，因此导航有错误的链接标记为“事件”wehn 使用后退按钮:
这里有一些屏幕截图可以说明我的意思:
在预告片页面上:
导航到运营商页面，然后按返回按钮:
确保正确链接处于“事件”状态的最佳方法是什么，因为 shell 没有被刷新并且链接实际上没有被点击？
最佳答案
您可能需要使用 ng-class directive 设置事件类
所以你的 html 看起来应该是这样的
<ul id="navList" class="nav nav-sidebar">
<li ng-class="{ active: isRoute('/settings/defaults') }"><a data-ui-sref="settings.defaults">Defaults</a></li>
<li ng-class="{ active: isRoute('/settings/carriers') }"><a data-ui-sref="settings.carriers"> Carriers</a></li>
<li ng-class="{ active: isRoute('/settings/trailers') }"><a data-ui-sref="settings.trailers"> Trailers</a></li>
<li ng-class="{ active: isRoute('/settings/shifts') }"><a data-ui-sref="settings.shifts">Shop Shifts</a></li>
<li ng-class="{ active: isRoute('/settings/bccap') }"><a data-ui-sref="settings.bccap">Bend Class Capacities</a></li>
</ul>
然后在你的 Controller 中。您将需要一个函数来检查当前路径并返回 true 或 false(取决于它是否匹配)。这可以通过使用 $location 服务来完成。
例如:
app.yourController(['$scope', '$location', function($scope, $location) {
$scope.isRoute = function(path) {
return $location.path() == path;
};
}]);
这应该足够了。 (我在我的应用程序中使用了类似的策略，而且效果很好)。
使用它，您将不需要监听每个导航的点击事件的函数。
希望这对您有所帮助!
关于javascript - 使用 Angularjs 时更新 shell 页面上的导航 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25248154/