SundayHacking

angular.jsの話です。突然ですが、ng-clickというのはクリックが完了したときに実行され、ng-mousedownというのは押しただけで実行されます。しかし、ng-mousedownはタッチパネルでは発火しません。mousedownイベントはマウスだけであり、タブレットやスマートフォンのブラウザではtouchstartイベントがあります。なので、てっきりng-touchstartというのが用意されているものと思っていました。

が、それは勘違いでした。少なくとも現時点では。 ng-clickより細かい制御をしたかったので、ng-touchstartはどうしても欲しいです。

ところで、angular.jsのdirectiveはとても協力ですが、アプリケーション実装するときにdirective開発するのは無駄だと思っています。標準で用意されたdirectiveとcontrollerで済むことが多いです。directiveは再利用性が高いものを開発するときに使うものでしょう。アプリではなくライブラリ開発するときですね。

ところが、アプリ開発しているときにどうしてもng-touchstartが欲しくなってしまったので、directive書いてみました。今まで食わず嫌いでしたが、簡単なdirectiveなら書いてみるとすっきりすることもあるな、とちょっと考え直しました。

というわけで、開発したdirectiveを貼り付けておきます。

angular.module('MyModule').directive('myTouchstart', ['$parse', '$swipe',
  function($parse, $swipe) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        var handler = $parse(attrs.myTouchstart);
        $swipe.bind(element, {
          start: function() {
            scope.$apply(function() {
              handler(scope);
            });
          }
        });
      }
    };
  }
]);

これだと、touchstartとmousedown両方に反応するのですが、ちゃんとやるならそのあたりも制御した方がいいですね。あと、touchstartだけでなく、touchmoveとtouchendもあったほうがいいでしょう。そこまでやったら、pullreqできそうです。というか、もう誰かがやっているのではないでしょうか。

これが一番近そうです。

https://github.com/angular/angular.js/issues/5334

まだ解決していない模様。確かに、ng-mousedownをoverrideしてもいいかもしれません。名前が直感的ではないですが。