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

<分区>

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

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

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

最佳答案

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

关于javascript - 更改 URL 时如何更新 AngularJS 指令？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12669674/

上一篇：javascript - 编译成可读 js 的轻量级 lisp 方言是什么？

下一篇：javascript - 主要 JavaScript 引擎中 JavaScript 关联数组(动态对象属性)的检索/插入的复杂性是多少？

相关文章：

javascript - 以同样的形式上传图片和文字

javascript - AJAX 未注意到文件内的更改

javascript - 什么是@angular/core/bundles/core.umd.js

javascript - 使用键盘选择 HTML SELECT 列表中的项目不会触发 CLICK 事件

javascript - 这是尾声吗？ (JavaScript)

Javascript/jQuery 对象范围问题

javascript - 如何使用 jQuery/Ajax 设置图像的黄色和白色亮度？

javascript - 无法找到 MongoDB

javascript - 如何构建指令以自定义带标签的单选按钮

javascript - 获取上传图像的宽度(在将文件上传到服务器之前)