javascript - AngularJS在URL更改时更改类名称

我正在尝试在url更改的菜单项中添加“活动”类。

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

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

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

这在我的本地计算机的页面加载上运行良好。

最佳答案

请参阅更新的Fiddle。重要的变化发生在以下几行：

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

基本上，activate函数是在更改URL之前触发的，这就是为什么它使用上一个项目的URL的原因。

另一种解决方案是使用$timeout（Fiddle）：

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

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

关于javascript - AngularJS在URL更改时更改类名称，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39167767/