更改URL后如何更新AngularJS指令？[重复]

一尘不染

更改URL后如何更新AngularJS指令？[重复]

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更改时重新运行。有什么办法吗？

阅读 188

2020-07-04

共1个答案

一尘不染

在评论中使用来自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");
            });
        }
    };
}]);

2020-07-04