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指令切换展开/展开视图的点击，您就可以访问该点击操作的$event。如果您有此活动，则只需引用$event.target（点击的来源）并直接在其上切换课程。

在模板中：

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

在控制器中：

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

这里是fiddle。

修改：如果您在某些元素上附加了点击处理程序，添加$event.preventDefault();以防止任何附加到此类元素的默认操作（即提交表单的按钮）非常有用）。由于您可能不想记住哪些元素可能会令人讨厌，因此在您的事件中始终拥有preventDefault()是最安全的，除非您明确希望允许默认操作发生。< / p>

Answer 2

为此你必须像在AngularJS中那样创建一个指令，你不会“允许”触及它们之外的DOM。

<强> JS

yourAngularApp.directive('changeColor', function(){
    return {
        restrict : "A",
        link: function(scope, element, attributes) {
            elem.bind('click', function() {
                element[0].classList.toggle('color-change');
            });
        }
    };
});

<强> HTML

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

前面的代码知道点击了应用该指令的元素，并在点击时切换（添加或删除）类的“颜色更改”。

更改AngularJS中特定标题的颜色

2 个答案:

这里是fiddle。