URL変更時のクラス名が変更されています

Question

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ではなく）問題は、各メニュー項目をクリックすると、アクティブなクラスが前のクリックされた項目に追加されることです。

Answer 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を注入することを忘れないでください。）

Answer 2

あなただけに必要URLがまだ変更されていないため、渡しているアイテムを使用してください：

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

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