需要点击 2 次才能在 angular 中应用 class

Question

我有列表菜单项，我想在单击时添加 class 并删除其他元素的相同 class。怎么过第一次点击不影响。但是再次单击同一项目将添加 class（并删除现有项目的 class）。我在这里做错了什么？

这里是HTML

<ul class="nav"> 
  <li><a class="active" ng-click="scrollTo($event,'glyphicons1')">Example</a></li> 
  <li><a class="" ng-click="scrollTo($event,'glyphicons2')">Alignment</a></li> 
  <li><a class="" ng-click="scrollTo($event,'glyphicons3')">Headers</a></li> 
  <li><a class="" ng-click="scrollTo($event,'glyphicons4')">Divider</a></li> 
  <li><a class="" ng-click="scrollTo($event,'glyphicons5')">Dinu items</a></li> 
</ul>

这是脚本

    $scope.scrollTo = function ($event, id) {
        if ($location.hash() !== id) {
            $scope.activeItem = id;
            $location.hash(id);
        } else {
            $anchorScroll();
        }
    };

我要切换的 class 是 active.

我有同样目的的指令，也以同样的方式运行。

自定义指令：

myApp.directive('activate', function () {
    return {
        restrict: 'C',
        link: function (scope, element) {
            element.bind("click", function (e) {
                $("a").removeClass("active");
                element.addClass("active");
            });
        }
    };
});

感谢您的帮助。

编辑：

我根据答案更改了 scrollTo() 函数（完美运行）。我需要做的更改是在调用 $location.hash() 函数之前更改变量。

Answer 1

既然可以使用内置于 ng-class 指令中的 angular，为什么要让它变得如此困难？

你可以像这样使用它

ng-class="{'active' : expression"}

阅读更多关于 ng-class here

Answer 2

如adeel_s所述，使用ng-class.

勾选this plunkr

HTML:

<ul class="nav"> 
  <li><a class="active" ng-class="{'active' : activeItem==='glyphicons1'}" ng-click="scrollTo($event,'glyphicons1')">Example</a></li> 
  <li><a class=""  ng-class="{'active' : activeItem==='glyphicons2'}"  ng-click="scrollTo($event,'glyphicons2')">Alignment</a></li> 
  <li><a class="" ng-class="{'active' : activeItem==='glyphicons3'}" ng-click="scrollTo($event,'glyphicons3')">Headers</a></li> 
  <li><a class="" ng-class="{'active' : activeItem==='glyphicons4'}" ng-click="scrollTo($event,'glyphicons4')">Divider</a></li> 
  <li><a class="" ng-class="{'active' : activeItem==='glyphicons5'}" ng-click="scrollTo($event,'glyphicons5')">Dinu items</a></li> 
</ul>

脚本：

    $scope.activeItem='glyphicons1';
   $scope.scrollTo = function ($event, id) {
        $scope.activeItem=id;

    };

需要点击 2 次才能在 angular 中应用 class

Need to click 2 times to apply a class in angular

angularjs

angularjs-directive

angularjs-routing