投稿RailsAPI×AngularでかっこいいWebアプリを作(ろうと試み)る【API呼んでみる編】の続きです。前回のあらすじRailsAPIアプリでAPI作ってAngularで呼ぶ、それだけだ。今回はシリーズ最後なので思いきってRailsの話一切しません。ソース置いとくので参考にどうぞ。AngularMaterialはご存知?Googleが提唱するマテリアルデザインをAngularJSで使うためのUIコンポーネントライブラリ。欲しいコンポーネントはあらかた揃っているし気軽に使えるしかっこいいしとっても重宝しています。個人的にめっちゃ痒いのに手が届かないところが多々有りまして。そのうちのひとつのオレオレ解決方法をご紹介させていただきたい。$mdDialog使いづらい問題AngularMaterialではダイアログを操作するためのサービス$mdDialogが用意されているのですが、これが絶妙に使いづらい。Alert,Confirmは特に問題無いがダイアログの中身をカスタムしようとすると急にムムム?な気持ちになる。いうのもカスタムするためにこんな実装が必要なのです。ダイアログに表示するViewを定義するダイアログに表示するViewのActionをハンドリングするControllerを定義する呼び出し元の画面とは$scopeを通じてやり取りするこの場合、ダイアログの数だけViewとControllerが量産される。Controllerで制御しているにも関わらずscopeに変数を生やしまくるという時代の流れをダッシュで駆け戻るような勇気と行動が必要になる。文章にすると全く分からなかったので久しぶりにExcel使って図を書いてみた。現状のscopeカオスまっしぐらの図そうそうこんな感じ。理想はscopeとっぱらってこうなること。あったらいいな、の図こうなるとControllerとViewをあえて分ける必要も無いので、定義したComponentを直接Dialogにつっこめるといちばんスッキリする。あったらいいな、の図ということでこれを実現するために$mdDialogをラップしたdialogというServiceを作った。手っ取り早く使い方をご紹介。)第二引数でダイアログの中身を定義する際に出て来る$ctrl。こいつに生やすプロパティ名・その中身の組み合わせを第三引数のlocalsで指定する。$ctrlにvalueというプロパティを生やして、そこにparentが現在保持しているvalueプロパティの値を渡してね。いう指定をすると後はdialogサービスが勝手に値の受け渡しを自動でしてくれるという仕組み。初期値でしょきちが表示される2ダイアログを開くとchildに初期値が渡っている3値を変更して・・・4保存を押すと、ほーらね!dialog内部を見ていただくと分かる通りDialogControllerが定義されていて、localsの情報を受け流しています。表示htmlをつっこむ。AngularMaterial側でこの問題が解決された際にdialogサービスだけ直せば事足りる(たぶん)いいことばっかりと言いたいところですがほんのちょっとだけ黒魔術臭が漂っている気がしなくもないかな。