如何使用 Angular 突出显示指向当前页面的链接？答案

【问题标题】：How can I highlight link to current page with Angular?如何使用 Angular 突出显示指向当前页面的链接？
【发布时间】：2014-11-01 10:36:28
【问题描述】：

我在我的页面上使用 Angular Routing，我还想突出显示与当前内容对应的菜单项。

我尝试使用像in this post 这样的 ngClass 和控制器，但没有效果

代码如下：

index.html

<body ng-app="sApp">
<div ng-controller="NavCtrl" class="nav">
  <ul>
    <li ng-class="{ active-btn: isActive('/')}">
      <a href="#" class="menu-btn">HOME</a>
    </li>
    <li ng-class="{ active-btn: isActive('/1')}">
      <a href="#/1" class="menu-btn">PAGE1</a>
    </li>
    <li ng-class="{ active-btn: isActive('/2')}">
      <a href="#/2" class="menu-btn">PAGE2</a>
    </li>
  </ul>
</div>
<div class="content" ng-view=""></div>

style.css

.nav {
  padding: 1rem;
  text-align: center;
  background-color: #ffa500;
}
.nav ul li {
  display: inline;
  font-weight: 700;
}
.menu-btn {
  padding: 1rem;
}
.menu-btn:hover {
  background-color: #ee82ee;
}
.active-btn {
  background-color: #00f;
}

script.js

'use strict';
var sApp;

sApp = angular.module('sApp', ['ngRoute']);

sApp.config(function($routeProvider) {
  return $routeProvider
  .when('/', {templateUrl: 'h.html'})
  .when('/1', {templateUrl: '1.html'})
  .when('/2', {templateUrl: '2.html'})
  .otherwise({redirectTo: '/'});
});

sApp.controller('NavCtrl', function($scope, $location) {
  $scope.isActive = function(viewLocation) {
    return viewLocation === $location.path();
  };
});

这里是plunker：

看起来菜单项无法将类更改为 active-btn。你能帮帮我吗？

【问题讨论】：

标签： javascript css angularjs menuitem highlight

【解决方案1】：

你可以这样做：

   <li ng-class="{active: $route.current.loadedTemplateUrl=='/1'}">
     My 1 active
   </li>

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="angular-route@*" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="sApp">
    <div ng-controller="NavCtrl" class="nav">
      <ul>
        <li ng-class="classActive('/')">
          <a href="#" class="menu-btn">HOME</a>
        </li>
        <li ng-class="classActive('/1')">
          <a href="#/1" class="menu-btn">PAGE1</a>
        </li>
        <li ng-class="classActive('/2')">
          <a href="#/2" class="menu-btn">PAGE2</a>
        </li>
      </ul>
    </div>
    <div class="content" ng-view=""></div>
  </body>

</html>

还有 script.js

 'use strict';
  var sApp;

  sApp = angular.module('sApp', ['ngRoute']);

  sApp.config(function($routeProvider) {
    return $routeProvider
    .when('/', {templateUrl: 'h.html'})
    .when('/1', {templateUrl: '1.html'})
    .when('/2', {templateUrl: '2.html'})
    .otherwise({redirectTo: '/'});
  });

  sApp.controller('NavCtrl', function($scope, $location) {
    $scope.isActive = function(viewLocation) {
      return viewLocation === $location.path();
    };

    $scope.classActive = function( viewLocation ) {
      if( $scope.isActive(viewLocation) ) {
        return 'active-btn';
      }
      else {
        return 'inactive-btn';
      }
    }
  });

最好不要在 html 中添加太多逻辑，这样的功能更有意义。更有意义的是将所有菜单内容包装在一个对象中并迭代该对象。然后，您还可以例如收听 locationsuccess 并仅更改对象，而无需在单击时更改它。这样它不依赖于点击。

我就是这样做的，这样逻辑也可以保留在抽象服务中并且更可重用。

祝你好运！

【讨论】：

谢谢，这解决了我的问题；）我会按照您的建议尝试将整个菜单设为对象