需要单击 2 次以在 Angular 中应用一个类答案

【问题标题】：Need to click 2 times to apply a class in angular需要单击 2 次以在 Angular 中应用一个类
【发布时间】：2016-03-09 13:52:11
【问题描述】：

我有列表菜单项，我想在单击时添加一个类并为其他元素删除相同的类。第一次点击如何不起作用。但是再次单击同一项目将添加类（并删除现有项目的类）。我在这里做错了什么？

这里是 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();
        }
    };

我要切换的类是活动的。

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

自定义指令：

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() 函数之前更改变量。

【问题讨论】：

只需使用ng-class 即可。停止将 jQuery 用于 Angular 可以为您做的事情，因为它旨在做......使用数据模型来驱动视图
你错过了 scope.$digest() 或将你的代码嵌入到 scope.$apply
对于不返回承诺的事情使用$.when 也是没有意义的。如果你确实使用了 promises...使用内置 $q 而不是 jQuery

标签： angularjs angularjs-directive angularjs-routing

【解决方案1】：

正如 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】：

当您可以只使用 ng-class 指令中内置的 angular 时，为什么会变得如此困难？

你可以像这样使用它

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

阅读更多关于 ng-class here

【讨论】：

您好，感谢您的回复。我也用过这个方法。我仍然需要点击两次才能申请课程。我相信“$location.hash(id);”麻烦。请检查编辑。
您好，感谢您的帮助，我得到了解决方案。我更新了问题。