javascript - 使用 ng-click 切换父元素的类？

Question

我有一些 javascript 正在尝试将其转换为 Angular:

$('.col-lg .fa-clock-o').click(function(e){
    $(this).parent().toggleClass('set-time');
    e.preventDefault()
});

我尝试将以下内容添加到包含链接的子元素中，但它不起作用，也许有一种适当的“Angular ”方法可以代替？

<a href="#" class="fa fa-clock-o" aria-hidden="true" ng-click="$(this).parent().toggleClass('set-time')"></a>

Answer 1

一种更“Angular”的方法是设置一个变量，该变量表示父元素上是否存在 set-time 类。默认情况下，这将是未定义，这是错误的。

然后，要在 ng-click 中切换它，您只需将值设置为与当前值相反的值即可。

<div ng-class="{'set-time': setTimeClass}">
    <a href class="fa fa-clock-o" aria-hidden="true" ng-click="setTimeClass = !setTimeClass">toggle class</a>
</div>

这是一个工作示例:

var app = angular.module('app', []);

.set-time {
 background :red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
     <div ng-class="{'set-time': setTimeClass}">
        <a href class="fa fa-clock-o" aria-hidden="true" ng-click="setTimeClass = !setTimeClass">toggle class</a>
    </div>
    
</div>