How to put active class to specific id/footer of a html page using angular js?

Question

I am using following directive for active class,but this doesn't get appplied to specific id on page

.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); //hack because path does not return including hashbang
        scope.location = location;
        scope.$watch('location.path()', function (newPath) {
          if (path === newPath) {
            element.addClass(active);
          } else {
            element.removeClass(active);
          }
        });
      }
    };
  }])

Following is my navigation bar Home,About and products are different pages where the active class is getting applied. But "Contact" is a footer on home page where active class is not getting applied.How can I achieve it?

<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>

Any chance that you need to define active classat your home page as well? (inside the homepage css file) — ymz
– ymz, Commented Dec 16, 2018 at 15:26
Please inspect the newPath value (use console.log ,debugger, etc.). I suspect that when dealing with anchoring, your trick of path.substring(1) is just not working (path should be /#contact when clicking contact) — ymz
– ymz, Commented Dec 16, 2018 at 15:38

Manju Smilinstar · Accepted Answer · 2018-12-17 08:04:40Z

0

Change restrict: 'A' to restrict: 'E'

Check once where you wrote ng-app , does footer included in ng-app?

edited Dec 17, 2018 at 8:04

answered Dec 17, 2018 at 3:05

Manju Smilinstar

13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

miken32 Over a year ago

Please edit your question to include some explanation for your answer. This will make it more valuable to the person asking the question, and to future visitors.

Manju Smilinstar Over a year ago

Change ng-click and Contact is not a page why you giving it as anchor tag.some examples for scroll down embed.plnkr.co/G5pMjsM6tswDUFxE3xer and jsfiddle.net/brettdewoody/y65G5

Collectives™ on Stack Overflow

How to put active class to specific id/footer of a html page using angular js?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related