活動報告6 オートコンプリート的なディレクティブを作る-

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

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

3. 1.概要
1. 今回作る予定のディレクティブ
オートコンプリート的なdirectiveを作る。
前回のが初級編だとしらたたぶん中級編とかになるのかな。
完成イメージ化こちら
inputにフォーカスインすると
設定されたリストを表示する
keyupで入力文字に一致す
る内容のみを表示する
ラベル表示になる

4. 2.ディレクティブを考える
1. restrict
まずは、Directiveの運用方法を何にするかを考えてみる。
ピローンって部分はdirectiveが独自に表示させなきゃいけない部分だし、Eにする。
指定できるオプションは下の表みてください。
A 属性名として利用可能
E 要素名として利用可能
C クラス名として利用可能
M コメントとして利用可能
restrictのオプション

5. ２.ディレクティブを考える
2. scope
次はscopeの生成方法を考えてみる。
いろんな要素に使うと思うので今回も分離スコープにする。
false 利用箇所のscopeを共有
true 利用箇所のscopeから派生したscopeを生成
オブジェクトリテラ
ル
分離スコープを生成
scopeのオプション
指定する属性はきっと全部使う。
ざっと思いつくのは
①リストを表示するためにデータバインドする（=）
②リストに表示する名称を特定するプロパティを文字列としてもらう(@)
③リストを選択した時に実行されるコントローラー側のfunction(&)
④選択したものを保持しておくためにデータバインド(=)
@ 文字列として結びつける
= データバインディングとして結びつける
& functionとして結びつける
属性

6. ２.ディレクティブを考える
3. template
ペローンの部分をdirectiveに記述する場合は、templateを使う。
今回はtemplateに直接HTMLを書くけど、templateを別に切り出すこともできる。
その場合に、directiveで読み込む場合はtemplateUrlにパスを指定すればOK。
HTMLはこんな感じ。
ここまでをコーディングするとこんな感じ。

7. ２.ディレクティブを考える
3. template
HTMLの内容をざっくり解説。
bootstrap3系をつかってるので、各classにはbootstrapのを指定してる。
独自に作ったのは、このdirective自体に適用されるものと、「d-complete-input」。
ng-show :
anglarが提供するdirective
指定された式がtrueの場合は要素を表示する
ng-repeat :
anglarが提供するdirective
指定された配列分処理を繰り返す
ng-click :
angularが提供するdirective
クリックイベントを検知して、指定されたfunctionを実行する
独自のCSS定義

8. ２.ディレクティブを考える
4. replace
replaceにtureを指定すると、directiveそのものをteplateの要素で置き換えてくれる。

9. ２.ディレクティブを考える
5. link
前回と違い、今回は結構実装しないとダメっぽい。
作るメソッドはこんな感じ。
①初期処理
②バインドされた値をwatchする処理
③フォーカスインした時の処理
④フォーカスアウトした時の処理
⑤リストがクリックされた時の処理
⑥入力された文字列に合致するものを抽出する処理
link関数に指定するパラメータは前回と同じ下の3つ
scope directiveのscope
element 指定された要素
attrs 属性

10. ２.ディレクティブを考える
5. link
①初期処理
この処理は別に大したことない。
単純に値を初期化してるだけ。

11. ２.ディレクティブを考える
5. link
②バインドされた値をwatchする処理
angularには$watchっていうscopeの値が変更されるのを監視するメソッドがある。
これを利用してリストの中身が変更されたら処理を実行するようにしたりできる。
なんでwatchするようにするかって、バインドされたデータを一度保持させたいからってのと、後々soket.io使った時にリス
トの中身とか変えると思うから。
link関数が実行されたときに、socpeは生成されているけど、値はまだバインドされてなかった。
HTML生成時はちゃんとバインドされてるけどね。
右の図がwatchのメソッド。
第1パラメータに監視対象の変数名を指定して、第2パラメータは
functionになる。
functionのパラメータは2つあって、変更後の値と変更前の値をそれぞれ
うけとることができる。
今の段階では、angular.copyの部分が必要だった。
angular.copyでディープコピーしてます。

12. ２.ディレクティブを考える
5. link
③フォーカスインした時の処理
要素のインプットにフォーカスインした時にリストを表示する処理を記述する。
templateにng-showしてるところで指定したisFocusを変更してピローンする。
この要素のになるinputをfindして、それにfocusイベントを設定する。
んで、実行されたらscope.isFocusをtrueにする。
分離スコープが親スコープと双方間バインディングしていて、ajaxやインベント待ち
のような場合は、angularは変更を検知できない。
scope.$applyはデータバインドを更新する処理で、これによりview側がちゃんと
変更されるようになる。
変更を検知するとng-showしてるところ（赤枠）の値が
バインドによって変更されるためulタグがピローンする。
変更検知！

13. ２.ディレクティブを考える
5. link
④フォーカスアウトした時の処理
要素のインプットがフォーカスアウトした時にリストを非表示にする処理を記述する。
この時リストにあるもの以外が指定されてたら、インプットを赤くする。
この処理でのポイントは300ミリ秒遅延させてるところ。
よくわからんけど、こうしないとうまく動作しなかった。

14. ２.ディレクティブを考える
5. link
⑤リストがクリックされた時の処理
リストのアイテムにそれぞれng-clickを設定することで、クリックされたものがどれかをパラメータでもらえるようにした。
処理内容は普通です。
scope.executeが存在していたら、指定されたfunction
を実行するって感じです。

15. ２.ディレクティブを考える
5. link
⑥入力された文字列に合致するものを抽出する処理
これも別に普通のJavascriptです。
基本ディープコピーしてます。
後は入力文字列を含むものをチェックして
リストにプッシュしてからのディープコピーで
リストの内容を変更してます。

16. 3.ディレクティブを使う
1. HTMLに指定する
最後に、作ったディレクティブを使ってみる。
replaceを指定しているから、実際HTMLにコンパイルされるときは、auto-complete-directiveって名称はでないで、
templateのHTMLが展開される。

17. ４.最後
Directive作れるようになると、angularの楽しさが増しますね。
次は、外人のライブラリが動かなかったのでDrag&Dropでもやりますかね。
Unity5をインストールしてみた。
Unityちゃんでなんかつくってみようかな。