ng-model, ng-change, ng-blurをdirectiveに格納する方法

Question

質問させてください。
AngularJSを採用したwebアプリケーションをつくっています。
view側でjsのcontrollerに紐付ける際、

<textarea name="title" ng-model="item" ng-change="updateStatus('editing')" ng-blur="textareaBlur(item)">

など ng-***で１つ１つトリガーにして呼び出す方法が一般的だと思うのですが、ng-*** ng-*** ng-***と続くとコードの見通しも悪くなり、良い方法がないか模索しているのですが、なにか方法はありませんか？

こういうとき、directiveに格納してchangeとblurをまとめて書くなどするのがよいのでしょうか。

とりあえず、ng-***を使えばいいよという情報が多く、可能な限りdirectiveに格納すべきという話もよく聞くのですがネットにはあまり情報がなく、もやっとしています。

初心者な質問ですみませんが、ご回答いただけますと嬉しいです。

Answer 1

これが正解ということではなく、考え方の一つとして。

そもそも論になりますが、Webアプリの開発で Angular を使うのには、HTML 要素とビジネスロジックを連携させる部分のコードを最小化するという目的があると思います。
その観点で言えば、ng-xxx で記述できることは ng-xxx で書き、そうでない処理だけ directive や スコープメソッド化する、というのが一般的には正解と言えるのではないでしょうか。
これは、ng-xxx だけでなく AngularJSが提供している各種のサービスやディレクティブの使用を、自前のコードを書くことよりも優先するという考えでもあります。

ただし、カスタムディレクティブの小さなコードを書くことによって、HTML側の記述量を劇的に削減できる、というような場合はこの限りではありません。つまり、どちらがコード量を削減できるかというバランスを重視してはどうか、ということです。

ご参考になれば。

Comments

[aoshima.natsuki]

ご回答ありがとうございます。

なるほど。確かに、何でもかんでもdirectiveやスコープメソッド化すればよいという問題ではないのは理解できました。現状として、html側の記述量がとても多くなってしまっており、ng-xxxで解決できるものもdirectiveに逃がしたいと考えています。

その場合、具体的にどのような書き方でcontrollerと連携するのかよくわかりません...

angular.module('app').directive 'textarea', ->
{
restrict: 'E'
link: ->
clickを検知 -> controller側の$scope.textareaClick = (item) -> に渡す
focusを検知 -> controller側の$scope.textareaFocus = (item) -> に渡す
blurを検知 -> controller側の$scope.textareaBlur = (item) -> に渡す
}

のようなことを素のjavascriptで書かないといけないんだな... というのはわかるのですが、具体的なコードにするとどのような書き方になるのでしょうか。よろしくお願いいたします。