javascript - 更改 AngularJS 中特定标题的颜色

Question

我正在尝试更改 AngularJS 中特定标题的颜色。我的问题是，其中有多个具有相同类别的标题，我想更改仅单击的标题的颜色。目前，我尝试过:

HTML:

<div class="row">
    <div class="span6">
        <div class="heading">Heading 1</div>                     
    </div>
    <div class="span1">
        <i class="pull-right" expand="check" collapse="close"></i>
    </div>
</div>

JS:

scope.setExpandCollapse = function () {
    if (scope.expand && scope.collapse) {
        if (isOpen) {
            angular.element(document.querySelectorAll('.heading')).removeClass('color-change');
        } else {
            angular.element(document.querySelectorAll('.heading')).addClass('color-change');
        }
    }
};

问题在于，由于querySelectorAll，它改变了所有标题的颜色。有没有办法让我在不改变 HTML 的情况下做到这一点？

Answer 1

有很多方法可以解决这个问题。这是一个:

如果您使用 ngClick 触发切换展开/折叠 View 的点击指令，您将可以访问$event该点击操作。如果您有事件，可以直接引用$event.target (点击的来源)并直接在其上切换类。

在模板中:

<h1 class="heading" ng-click="$ctrl.toggle($event);">
  Heading
</h1>

在 Controller 中:

this.toggle = function($event) {    
  $event.preventDefault(); 
  angular.element($event.target).toggleClass('color-change');
};

这是一个 fiddle .

编辑:如果您要在某些元素上附加点击处理程序，则添加 $event.preventDefault(); 会很有用。以防止附加到此类元素的任何默认操作(即提交表单的按钮)。由于您可能不想记住哪些元素可能会做一些令人讨厌的事情，因此始终使用 preventDefault() 是最安全的。在您的事件上，除非您明确希望允许发生默认操作。