angularjs カスタムディレクティブについて

カスタムディレクティブについて

カスタムディレクティブの作成方法
基本形

JS例

var app - angular.module('app');

app.directive('myDirective', function(){
　　　　　　　　//↑ディレクティブの名称(キャメルケースにする)
 return{
    replace:true
  , restruct:'E'
  , scope:{
       title:'@'
    }
  , template:'<div style="width:100%">{{title}}</div>'
  , link:function(scope,element,attr){
     console.log(scope.title);
    };
 };
)};

HTML例

<my-directive title="タイトル"></my-directive>
　//↑全て小文字で、キャメルケースの大文字の前にハイフンを入れる

実行時のHTML

<div title="タイトル" style="width:100%">タイトル</div>

上記はあまりいい例ではないですが、ディレクティブの基本形です。
scopeには@,=,&の三種類が指定でき、それぞれ以下となります。
・ @:1wayバインディング
・ =:2wayバインディング
・ &:親スコープ関数

つまり、ディレクティブ内で変更した値を親スコープに反映させたい場合は、
=を使用する事で実現できます。

細かい設定値等は下記が参考になると思います。
何となく分かった気持ちになる AngularJS のカスタムディレクティブ
AngularJSカスタムディレクティブのスコープ設定方法

カスタムディレクティブは色々な用途で使用できます。
(例えば、共通ヘッダや独自の入力用部品等)

以前、業務で使用した時は、チェックタイミングの仕様で
angularで用意されているバリデーション機能を使えなかったり、
独自のフィルター機能、変更されたかどうかのステータスを保持するために
専用のinputディレクティブを作成しました。
ここまでくると本当にangularを使う意味があったのか、という話にもなりますが・・・

独自のinputを作成する場合で、イベントを拾いたい時はlink内でbindしてやれば良いと思います。

JS例

var app - angular.module('app');

app.directive('myInput', function(){
　　　　　　　　//↑ディレクティブの名称(キャメルケースにする)
 return{
    replace:false
  , restruct:'A'
  , link:function(scope,element,attr){
     element.bind('keydown', function(){
       scope.apply(function(){

          処理

       });
     )};
 };
)};

bindしたイベント内でscopeを使用したい場合は、
scope.apply内に処理を記述しないと、scopeがundefinedとなってしまうので気を付けて下さい。