Possible Duplicate:
Set active tab style with 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:
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");
}
}
};
});
This will add the 'current' class to the correct <a>
tag when the page url is #/one
or /#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 ?
Using kfis's code from https://stackoverflow.com/a/12631214/1684860 in the comments, I have this working now using $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");
});
}
};
}]);
Assuming you are using ngView/routeProvider you probably need to listen for a route change event, perhaps $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 currentPath
variable is only being evaluated once, so you might want to rework that into the link function so its effective scope is clearer.
1 [http://docs.angularjs.org/api/ng.$route]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With