I tried using the activeLink directive to apply an active class to a specific id on the page, but it didn't work as expected.
.directive('activeLink', ['$location', function (location) {
return {
restrict: 'A',
link: function(scope, element, attrs, controller) {
var active = attrs.activeLink;
var path = attrs.href;
path = path.substring(1); //adjusting for hashbang
scope.location = location;
scope.$watch('location.path()', function (newPath) {
if (path === newPath) {
element.addClass(active);
} else {
element.removeClass(active);
}
});
}
};
}])
In my navigation bar, Home, About and Products pages are working fine with the active class. However, in the footer section of the home page, the "Contact" link does not get the active class applied. How can I resolve this?
<ul class="nav navbar-nav">
<li><a active-link="active" href="#/" target="_self">Home</a></li>
<li><a active-link="active" href="#/about" target="_self">About</a></li>
<li><a active-link="active" href="#/products" target="_self">Products</a></li>
**<li><a active-link="active" ng-click="scrollTo('contact')" href="#/#contact" target="_self">Contact Us</a></li>**
</ul>