Как поместить активный класс в определенный идентификатор / нижний колонтитул HTML-страницы, используя угловой JS?

Question

Я использую следующую директиву для активного класса, но она не применяется к определенному идентификатору на странице

.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);
          }
        });
      }
    };
  }])

Ниже приводится моя панель навигации. На главной странице и о продуктах представлены разные страницы, где активный классприменяетсяНо «Контакт» - это нижний колонтитул на домашней странице, где активный класс не применяется. Как мне этого добиться?

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

Answer 1

Измените restrict: 'A' на restrict: 'E'

Проверьте один раз, где вы написали ng-app, включен ли нижний колонтитул в ng-app?