Добавить / удалить класс после щелчка по угловой ссылке

Question

У меня проблема и вопрос к моему angularJS-коду. Итак, мне нужно установить новый класс после нажатия на ссылку. Моя главная проблема заключается в том, что у меня есть несколько ссылок в угловых и несколько в php.

Пример;

<li
    <a  href="/somelink>angular link</a>

</li>
  <li
    <a  href="/somelink2>angular link 2</a>

</li>
  <li
    <a  href="/somelink3>angular link 3</a>

</li>

  <li
    <a  href="/somelink 4> Normal link - reload page</a>

</li>  

код, который устанавливает класс для текущей ссылки после перезагрузки страницы

  var selector = $('a[href^="' + $(location).attr('href') + '"]');
  selector.addClass('LinkToMenu').parent().addClass('menu-active-border')

Я написал некоторый код jquery, который добавляет класс после страницы realod к текущим адресам, но теперь у меня две проблемы;

1 Если я нахожусь на странице php и нажимаю угловую страницу, страница браузера realod, и моя ссылка получает необходимый класс - это нормально, но теперь, если я пытаюсь щелкнуть другую угловую страницу, я не могу удалить этот класс, как это сделать?

2 Я написал некоторый угловой код, который (пример выше) добавляет класс после угловой ссылки клика, но это вызывает проблемы, потому что, если я пытаюсь перейти от страницы php к угловому классу страницы, он устанавливается еще до перезагрузки страницы.

резюме;

1 ОТ страницы php -> угловой вид Мне нужно установить класс после перезагрузки страницы, а не сразу после щелчка. 2 Измените класс после нажатия на угловую ссылку (сразу), удалите старый и добавьте текущий класс.

Answer 1

Если я правильно вас понимаю, вы спрашиваете, как добавлять и удалять классы CSS в angularjs. Вы можете использовать ng-class для добавления условных классов.

<a href="/somelink2" ng-class="{'menu-active-border': isLinkActive('/somelink2')}">angular link 2</a>

Где ваша функция isLinkActive будет выглядеть примерно так:

$scope.isLinkActive = function(path) {
  return $location.path() == path;
}

Другой вариант - создать собственную директиву и манипулировать там классами:

<a href="/somelink" highlight-if-active></a>

myApp.directive('highlightIfActive', [function($location){
    return {
        restrict: 'A',
        link: function($scope, $element, $attrs) {
            if ($location.href() == $attrs.href) {
              $element.addClass('menu-active-border');
            } else {
              $element.removeClass('menu-active-border');
            }
        }
    }
}]);