CODEWITHSUNDEEP
javascripthtmlangularjscss
trojan
trojan

Reputation: 1

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

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>

Upvotes: 0

Views: 277

Answers (1)

Manju Smilinstar
Manju Smilinstar

Reputation: 1

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

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

Upvotes: 0

Related Questions