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