Question

我正在使用AngularJS并尝试在菜单中添加“currentclass”类每当显示标签内容时。这是我到目前为止，并且在加载页面时它可以正常工作

<ul id="nav">
    <li><a href="#/about" class="tab">About Us</a></li>
    <li><a href="#/services" class="tab">Services</a></li>
  </ul>

myModule.directive('tab', function($location) {
    var currentPath = "#" + $location.path();
   return {
        restrict: 'C',
        link: function(scope, element, attrs) {
            var href = element.attr("href");
            if (currentPath == href)
            {
                element.addClass("currentclass");
            }
        }
    };
});

这将在页面时将'currentclass'类添加到正确的标记 url是＃/ about或/ #services

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

Answer 1

你的逻辑有点不对劲。它会将“currentClass”类添加到每个被单击的选项卡中。而不是在“tab”指令上编写逻辑，而是使用routeChangeSuccess事件。您可以设置类ng-class="{active : activeMenu === item}"

这是一个DEMO

更改URL时如何制作活动的AngularJS指令

1 个答案: