Как обновить директиву AngularJS при изменении URL-адреса?

Возможный дубликат:
Установить активный стиль табуляции с помощью AngularJS

Я использую AngularJS и пытаюсь добавить "текущий" класс в мое меню всякий раз, когда отображается содержимое этой вкладки. Это то, что у меня есть до сих пор, и отлично работает при загрузке страницы:

HTML:

<ul id="nav">
    <li><a href="#/one" class="highlighttab">One</a></li>
    <li><a href="#/two" class="highlighttab">Two</a></li>
</ul>

JS:

myModule.directive('highlighttab', function($location) {
    var currentPath = "#" + $location.path();

    return {
        restrict: 'C',
        link: function(scope, element, attrs) {
            var href = element.attr("href");
            if (currentPath == href)
            {
                element.addClass("current");
            }
        }
    };
});

Это добавит "текущий" класс к правильному тегу <a>, когда URL-адрес страницы #/one или /#two

Проблема в том, что если я нажму вторую вкладку, класс не добавится к ней. Я предполагаю, что мне нужно каким-то образом заставить код внутри директивы повторно запускаться при изменении URL-адреса. Есть ли способ сделать это?

Ответ 1

Используя kfis-код из fooobar.com/questions/21768/... в комментариях, я теперь работаю, используя $scope.watch на location.path().

myModule.directive('highlighttab', ['$location', function(location) {

    return {
        restrict: 'C',
        link: function($scope, $element, $attrs) {
            var elementPath = $attrs.href.substring(1);
            $scope.$location = location;
            $scope.$watch('$location.path()', function(locationPath) {
                (elementPath === locationPath) ? $element.addClass("current") : $element.removeClass("current");
            });
        }
    };
}]);

Ответ 2

Предполагая, что вы используете ngView/routeProvider, вам, вероятно, необходимо прослушать событие изменения маршрута, возможно, $routeChangeSuccess 1.

например. в вашей функции связи:

scope.$on("$routeChangeSuccess", function (event, current, previous) {
    if (current == href) {
      element.addClass("current");
    }
    else {
      element.removeClass("current");
    }
});

Не тестируется, поэтому может потребоваться переделка, например. для наличия/отсутствия "#". Я ожидаю, что ваша переменная currentPath будет оцениваться только один раз, поэтому вы захотите переделать ее в функцию ссылок, чтобы ее эффективная область была яснее.

1 [http://docs.angularjs.org/api/ng.otherroute]