Question

我对我的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页面之后的类添加到当前的adres，但是我现在有两个问题。

1如果我在php页面上并单击有角页面，浏览器实境页面，并且我的链接获取了需要的类-可以，但是现在如果我尝试单击其他有角页面，则无法删除该类，怎么办？

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

摘要；

1从php页面->角度视图我需要在重新加载页面后设置类，而不是单击后立即设置。 2单击角度链接后立即更改类别，删除较旧的类别并添加当前类别。

Answer 1

如果我对您的理解正确，那么您在问如何在angularjs中添加和删除CSS类。您可以使用they rely on the Windows API添加条件类。

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

单击角度链接后添加/删除课程

1 个答案: