javascript 更改 URL 时如何更新 AngularJS 指令？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12669674/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to update AngularJS directive when URL is changed?
提问by mikel
Possible Duplicate:
Set active tab style with AngularJS
可能的重复：
使用 AngularJS 设置活动选项卡样式
I'm using AngularJS and trying to add a "current" class to my menu whenever that tab's content is being displayed. This is what I have so far, and it works fine when loading the page:
我正在使用 AngularJS 并尝试在显示该选项卡的内容时将“当前”类添加到我的菜单中。到目前为止，这是我所拥有的，并且在加载页面时工作正常：
HTML:
HTML：
<ul id="nav">
<li><a href="#/one" class="highlighttab">One</a></li>
<li><a href="#/two" class="highlighttab">Two</a></li>
</ul>
JS:
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");
}
}
};
});
This will add the 'current' class to the correct <a>tag when the page url is #/oneor /#two
<a>当页面 url 为#/one或时，这会将“当前”类添加到正确的标签/#two
The problem is if I click the second tab, the class does not get added to it. I imagine I need some way to get the code inside the directive to be re-run when the URL changes. Is there any way to do that ?
问题是，如果我单击第二个选项卡，则不会向其中添加该类。我想我需要某种方法来让指令中的代码在 URL 更改时重新运行。有没有办法做到这一点？
回答by mikel
Using kfis's code from https://stackoverflow.com/a/12631214/1684860in the comments, I have this working now using $scope.watch on location.path() .
在评论中使用来自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");
});
}
};
}]);
回答by Steven
Assuming you are using ngView/routeProvider you probably need to listen for a route change event, perhaps $routeChangeSuccess 1.
假设您正在使用 ngView/routeProvider，您可能需要监听路由更改事件，可能是 $routeChangeSuccess 1。
e.g. in your link function:
例如在您的链接功能中：
scope.$on("$routeChangeSuccess", function (event, current, previous) {
if (current == href) {
element.addClass("current");
}
else {
element.removeClass("current");
}
});
Not tested so might need tinkering e.g. for presence/absence of '#'. I expect your currentPathvariable is only being evaluated once, so you might want to rework that into the link function so its effective scope is clearer.
未经测试，因此可能需要修改，例如是否存在“#”。我希望你的currentPath变量只被评估一次，所以你可能想把它改写到链接函数中，这样它的有效范围就更清楚了。
1[http://docs.angularjs.org/api/ng.$route]
1[http://docs.angularjs.org/api/ng.$route]
