10

可能重复：
使用 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 更改时重新运行。有什么办法吗？

4

2 回答 2

13

在评论中使用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");
            });
        }
    };
}]);
于 2012-10-02T05:09:06.373 回答
7

假设您使用的是 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]

于 2012-10-01T10:46:28.207 回答