logo标签列表

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

javascriptcssangularjsmenuitemhighlight
3

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

我尝试使用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。您能帮我吗？

2个回答
2
您可以像这样做：

您可以这样做：

   <li ng-class="{active: $route.current.loadedTemplateUrl=='/1'}">
     My 1 active
   </li>
0
<!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等事件，并仅更改对象，而无需在单击时更改它。这样它就不会依赖于单击。

这就是我会这样做的方式，这样逻辑可以留在抽象服务中，并且更具可重用性。

祝你好运！

谢谢，那解决了我的问题 ;) 我会尝试按照您的建议将整个菜单制作为一个对象。 - damogari
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接