Question

可能重复：
Set active tab style with AngularJS

我正在使用AngularJS并尝试添加＆＃34;当前＆＃34;每当显示该标签的内容时，我都会选择菜单。这是我到目前为止，它在加载页面时工作正常：

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");
            }
        }
    };
});

这将添加＆＃39;当前＆＃39;如果网页网址为<a>或#/one

，请使用正确的/#two代码

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

Answer 1

在评论中使用来自https://stackoverflow.com/a/12631214/1684860的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。

e.g。在您的链接功能中：

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.$route]

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

2 个答案: