使用 Angularjs 时在 shell 页面上更新导航 CSS答案

【问题标题】：Updating nav CSS on shell page when using Angularjs使用 Angularjs 时在 shell 页面上更新导航 CSS
【发布时间】：2014-08-12 03:24:06
【问题描述】：

我正在为不同的状态使用 angularjs 处理部分视图网页。

这是我将加载所有部分视图的主页。我有一个用于在视图中导航负载的侧导航栏：

!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 类，以明确他们点击了哪些链接。 Angularjs 非常好，它可以记住用户的面包屑，并在使用后退按钮时负责加载正确的页面。但是，由于我的导航位于 shell 页面而不是部分视图中，因此在使用后退按钮时，导航具有标记为“活动”的不正确链接：

这里有一些屏幕截图来说明我的意思：

在预告片页面上：

导航到运营商页面，然后按返回按钮：

由于没有刷新外壳并且实际上没有单击链接，因此确保正确链接处于“活动”状态的最佳方法是什么？

【问题讨论】：

标签： javascript jquery html css angularjs

【解决方案1】：

您可能需要使用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>

然后在您的控制器中。您将需要一个检查当前路径并返回 true 或 false 的函数（取决于它是否匹配）。这可以通过使用 $location 服务来完成。

例如：

app.yourController(['$scope', '$location', function($scope, $location) {
  $scope.isRoute = function(path) {
    return $location.path() == path;
  };
}]);

这应该足够了。（我在我的应用程序中使用了类似的策略，并且效果很好）。

使用它，您将不需要监听每个导航的点击事件的功能。

希望这会有所帮助！

【讨论】：

像魅力一样工作！谢谢！

【解决方案2】：

我知道这已经回答了，但值得一提的是，这是 ui-sref-active 背后的全部要点，由于嵌套的 jquery 页面集成，可能并不完全适用于此处，但处于典型的 ui-router 状态setup，这就是这个指令的确切目的，所以我想我会把它留在这里给未来的读者

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active

【讨论】：