Maneira AngularJS de alterar o nome da classe no ng-click

Question

Eu sei que é uma boa prática não usar jQuery dentro de um aplicativo AngularJS, mas estou lutando para descobrir a maneira AngularJS de fazer isso:

$scope.clickEvent = function(event) {
    if($(event.target).hasClass('icon-closed')) {
        $(event.target).removeClass('icon-closed')
        $(event.target).addClass('icon-opened')
    } else {
        $(event.target).removeClass('icon-opened')
        $(event.target).addClass('icon-closed')
    }
}

Meu HTML:

<div class="component-title icon-closed" 
     ng-model="collapsed" 
     ng-click="collapsed=!collapsed;clickEvent($event)">{{component.name}}</div>

O collapsed o código está mostrando/ocultando painéis e o div está dentro de um ng-repeat loop, então nada a ver com o clickEvent função.

Eu esperava poder obter os nomes das classes do objeto de evento e alterá-los sem usar jQuery.Alguma ideia?

Obrigado :)

Answer 1

Você pode usar o ngClass directiva para alcançar este objectivo.

<div class="component-title"
     ng-class="{'icon-closed':collapsed,'icon-opened':!collapsed}"
     ng-model="collapsed"
     ng-click="collapsed=!collapsed">{{component.name}}</div>

Mais informações sobre ngClass pode ser encontrado aqui.