更改URL时如何更新AngularJS指令？

Question

可能重复:
使用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>当页面网址为#/one或时,这会将"当前"类添加到正确的标记中/#two

问题是如果我单击第二个选项卡,该类不会添加到它.我想我需要一些方法来获取指令中的代码,以便在URL更改时重新运行.有没有办法做到这一点？

Answer 1

在评论中使用来自/sf/answers/884185011/的 kfis代码,我现在使用$ scope.watch on 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");
            });
        }
    };
}]);

Answer 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.$ro​​ute]