Angularjs在URL更改上更改類名稱

我正在嘗試將「活動」類添加到URL更改的菜單項中。Angularjs在URL更改上更改類名稱

這是我到目前爲止已經試過：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]; 
    } 
});

這對我本地機器的頁面工作很好loa d。（不是在jsfiddle這似乎是合理的），但問題是當點擊每個菜單項時，'active'類將被添加到先前點擊的項目。

來源

2016-08-26 Taxellool

我對你在這裏試圖完成的事情感到困惑，你能否提供更多的細節？ –

我試圖在菜單項上應用'active'類，該菜單項的鏈接屬性等於'＃'後面的url當前部分。，以便在點擊http://domain.com/#/payments等外部鏈接時，導致「＃/ payments」的菜單項變爲活動狀態 – Taxellool

查看最新的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到你在這種情況下控制器）

來源

2016-08-26 13:49:30 Anton

非常棒。謝謝。 – Taxellool

@Taxellool，歡迎您，如果有幫助，請將答案標記爲正確，以便它可以爲未來的訪問者提供服務。謝謝。 – Anton

確實老兄。正在等待15分鐘的時間限制 – Taxellool

你只需要使用您傳遞的項目，因爲url尚未更改：

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

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

來源

2016-08-26 13:54:40 cullimorer

Angularjs在URL更改上更改類名稱

回答

相關問題