更改 URL 时如何更新 AngularJS 指令？ [复制]

Question

可能重复：
Set active tab style with 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");
            }
        }
    };
});

当页面 url 为 #/one 或 /#two 时，这会将“当前”类添加到正确的 <a> 标签中

问题是，如果我单击第二个选项卡，则不会将类添加到其中。我想我需要一些方法来让指令中的代码在 URL 更改时重新运行。有什么办法吗？

Answer 1

在 cmets 中使用来自 https://stackoverflow.com/a/12631214/1684860 的 kfis 代码，我现在可以在 location.path() 上使用 $scope.watch 进行这项工作。

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]