Question

我正在尝试在网址更改时将“有效”类添加到我的菜单项。

这是我到目前为止所尝试的：JSFiddle

（p.s：我试图使用堆栈的代码片段，但它似乎不起作用）

HTML：

<div ng-app="townApp">
  <aside ng-controller="sideCtrl">
    <ul id="sidebar">
      <li ng-repeat="item in menuItems" ng-class="{'active': item.link == url}">
        <a href="{{ item.link }}" ng-click="activate(item);">
        <i class="glyphicon glyphicon-{{ item.icon }}"></i>
        {{ item.text | uppercase }}
        </a>            
      </li>
    </ul>
  </aside>
</div>

JS：

var townApp = angular.module('townApp', []);

townApp.controller('sideCtrl', function($scope, $location){
  $scope.menuItems = [
    {text:"dashboard", link:"#/dashboard", icon:"tint"}, 
    {text:"payments", link:"#/payments", icon:"tint"}, 
    {text:"graphs", link:"#/graphs", icon:"tint"},
  ];
  $scope.url = '#' + $location.absUrl().split('/#')[1];
  $scope.activate = function(item){
    $scope.url = '#' + $location.absUrl().split('/#')[1];
  }
});

这对我本地机器的页面加载效果很好。（不是jsfiddle，这似乎是合理的）但问题是当点击每个菜单项时，'active'类将被添加到之前点击的项目。

Answer 1

查看更新的 Fiddle 。这些重要的变化发生在这些方面：

$scope.activate = function(item){
    $scope.url = item.link;
}

基本上，在更改URL之前会触发activate函数，这就是它获取前一项的URL的原因。

备用解决方案将使用$timeout （Fiddle）：

$scope.activate = function(item){
  $timeout(function() {
    $scope.url = '#' + $location.absUrl().split('/#')[1];
  });
}

（在这种情况下，不要忘记将$timeout注入控制器。）

Answer 2

您只需要使用您传入的项目，因为网址尚未更改：

    $scope.url = '#' + $location.absUrl().split('/#')[1];

    $scope.activate = function(item){
        $scope.url = item.link;
    }

Angularjs在url更改时更改类名

2 个答案: