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

背景

普通にスタイルを指定するだけなら:hover，:active擬似クラスを利用すれば問題ない．しかし，スマートフォン対応をしようとすれば:hoverが効かないものがあるらしい（参考）．

ということで，AngularJSのお勉強がてらhover/active時に任意のクラスを追加するdirectiveを作ってみた．

Directive

実際に使ってみるとこんな感じ．
html内で追加するクラスを任意で決定できるから便利っぽい？

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>

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

参考

• 【AngularJS】hover/active時にクラスを追加するdirective（gist）
• スマートフォンサイトでのhover - argumentLog

謝辞

参考サイトを教えてくれた後輩氏（@DeNAri01），ありがとう．