【AngularJS】hover/active時にクラスを追加するdirective

class_setter.coffee

app = angular.module 'MyApplication'

CLS_HOVER_DEFAULT = "hover"
CLS_ACTIVE_DEFAULT = "active"

app.directive 'clsHover', ->
  restrict: 'A'
  link: (scope, element, attrs, ctrl) ->

    clsHover = attrs.clsHover || CLS_HOVER_DEFAULT

    element.on 'mouseenter', -> element.addClass clsHover
    element.on 'mouseleave', -> element.removeClass clsHover


app.directive 'clsActive', ->
  restrict: 'A'
  link: (scope, element, attrs, ctrl) ->

    clsActive = attrs.clsActive || CLS_ACTIVE_DEFAULT

    element.on 'touchstart mousedown', -> element.addClass clsActive
    element.on 'touchmove touchcancel touchend mousemove mouseup', -> element.removeClass clsActive

test.html

<ul>
  <li cls-hover cls-active>hover時: hover，active時: active追加</li>
  <li cls-hover="li-hover">hover時: li-hover追加</li>
  <li cls-active="li-active">active時: li-active追加</li>
</ul>