单击角度链接后添加/删除类答案

【问题标题】：Add/remove class after click angular link单击角度链接后添加/删除类
【发布时间】：2019-06-06 16:11:36
【问题描述】：

我对我的 angularJS 代码有疑问。所以，我需要在点击链接后设置新课程。我的主要问题是，我在 angular 中有一些链接，在 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 页面上单击 angular 页面，浏览器 realod 页面和我的链接获取所需的类 - 没关系，但现在如果我尝试单击其他 angular 页面，我无法删除此类，怎么办？

2 我写了一些角度代码（上面的示例）在单击角度链接后添加类，但它会导致问题，因为如果我尝试从 php 页面移动到角度页面，则在重新加载页面之前设置类。

总结；

1 FROM php page -> angular view 我需要在重新加载页面后设置类，而不是在单击后立即设置。 2单击角度链接（立即）更改类，删除旧类并添加当前类。

【问题讨论】：

标签： jquery css angularjs

【解决方案1】：

如果我理解正确，您是在问如何在 angularjs 中添加和删除 CSS 类。您可以使用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');
            }
        }
    }
}]);

【讨论】：