Angularjs在url更改时更改类名

Question

我正在尝试在网址更改时为我的菜单项添加“活动”类。

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

（ps：我尝试使用堆栈的代码片段，但它似乎不起作用）

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

查看更新的小提琴 。 这些方面发生了重大变化：

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

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

另一种解决方案是使用$timeout （ 小提琴 ） ：

$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;
    }