活動報告5 ~簡単なディレクティブを作る~

1. パソコン部活動報告
2015/03/31
最新の技術をとりあえず試
してみることを目的とした
部です。

2. 2015/03月活動内容
1. angular.js1.3系を利用して再利用可能なディレクティブを作成する
Look at me mom...dad and I are having so much fun!

3. 1.概要
1. 今回作る予定のディレクティブ
angularではDom要素の変更はdirectiveに任せる思想があるので、クリックした要素を強調してどれがおさせたかわかるよう
になるディレクティブを作成する。
最終的にはクリックしたObject情報を特定できるようにする。
完成イメージ化こちら
ちょっとわかりにくいけど、クリックすると灰色になる。

4. 2.ディレクティブを考える
1. restrict
まずは、Directiveの運用方法を何にするかを考えてみる。
指定できるオプションは4つ。
いろいろと使いまわせるものにしたいのと、きっとリピート処理と一緒に使うことになるので、Aにすることにする。
A 属性名として利用可能
E 要素名として利用可能
C クラス名として利用可能
M コメントとして利用可能

5. ２.ディレクティブを考える
2. scope
次はscopeの生成方法を考えてみる。
再利用を前提としたdirectiveは分離スコープにするべきとangularの偉い人が言ってたんで、分離スコープにする。
scopeに指定できるオプションは以下の3つ。
scopeの共有ってのは、指定されているコントローラーで利用されているscope（親scope）を共有すること。
派生したscopeを生成ってのは、指定されているコントローラーのscopeに属するscopeになるってこと。
つまり、scopeに対してdirectiveから直接アクセスできちゃうし、コントローラーで指定されたscopeを指定するってこと
は
そのscopeに依存しちゃう。
だからscopeを分離することで独立性を高めるわけです。
false 利用箇所のscopeを共有
true 利用箇所のscopeから派生したscopeを生成
オブジェクトリテラ
ル
分離スコープを生成

6. ２.ディレクティブを考える
2. scope
分離スコープにするんだけど、利用するスコープのメンバにどういった属性を指定するかを考える。
指定できるのは以下の3つ。
想定する使い方はリピートされた要素に対して属性として指定するんだから、リピート要素をデータバインディングすれ
ばOK。
ここまでをコーディングするとこんな感じ
。
pushDirectiveってのは、このdirectiveの名称。
pushInfoがこのdirective内でアクセスするための
名称になって、infoがこのdirectiveを指定した要素側
でバインドする時に指定する名称。
@ 文字列として結びつける
= データバインディングとして結びつける
& functionとして結びつける

7. ２.ディレクティブを考える
3. link
んじゃ、実際に指定された場合のことを考えてみる。
まず、読み込まれたら該当要素にclickイベントを設定しないとだめだよね。
clickイベントのfunctionで要素のCSSを変更すればOKだから、簡単にできそう。
そこで使うのがlink関数。こいつが実行される時にはscopeが生成されてる。
パラメータは全部で5つあるけど、今回は↓の3つだけで大丈夫。
scope directiveのscope
element 指定された要素
attrs 属性

8. ２.ディレクティブを考える
3. link
ソースコードはこんな感じになる。

9. ２.ディレクティブを考える
3. link
最後に分離スコープにクリックされた要素であることを設定する処理を追加する。
赤枠が追加した部分。
バインドされたオブジェクトにメンバを追加して
どれが押されたかがわかるようにした。
押されたのもの抽出は、コントローラーかサービス
側の仕事ということで。。。

10. 3.ディレクティブを使う
1. HTMLに指定する
最後に、作ったディレクティブを使ってみる。

11. ４.最後
1. HTMLに指定する
directiveには今回指定しなかった、オプションがまだまだある。
direcitveを作るうえでは、templeteオプション、templeteUrlオプション、compile関数は抑えておいたほうがいい。
あー、unityでクソゲー作りたくなってきた。