2014年9月6日土曜日

2014/09/06 その3 AngularJS福岡勉強会(第2回) - Directiveの自作 -

01.directive - restrict: 'EAC' -



    <!-- restrict: 'E' -->
    要素名で置き換え!
    <ore-panel ></ore-panel>
    
    <!-- restrict: 'A' -->
    属性名で置き換え!
    <div ore-panel="" ></div>
      
    <!-- restrict: 'C' -->
    class名で置き換え!
    <div class="ore-panel" ></div>

02.directive - parent scope -


Directive内も外側のスコープが使えます。

03.directive - isolate scope -


Directive内でscopeを宣言し外のscopeと接続する事が出来ます。
こうする事で独自Directiveを作る人は外のscopeの事を考えずに作成する事ができます。
利用する人は属性にパラメータ値を渡す事が出来ます。

04.directive - isolate scope function -


属性に渡すのは値だけでなくfunctionも渡す事が出来ます。
scope:{ 'clicked': '&' } 
引数に値を渡す時はオブジェクトの形を使用します。




twitterのハッシュタグ

質問やこうした方がいいよ〜とかありましたら、↓につぶやいてください〜

#ng_fukuoka

2014年9月5日金曜日

2014/09/06 その2 AngularJS福岡勉強会(第2回) - DOM制御とか装飾とか -

01. ng-class


ng-classを使うとclassの切り替えが出来ます。
ng-class="{ 'panel-info': !isDanger, 'panel-danger': isDanger  }" と書くと
isDangerが trueの時に'panel-danger'class(スタイルシート)が
isDangerが falseの時に'panel-info'がDOM要素につけられます。

02. ng-style


ng-styleを使うとstyleの切り替えが出来ます。

03. ng-if


ng-ifを使うと要素の表示・非表示ができます。
☆ポイント☆
display:none;ではなくて要素が作られたり消されたりします。

04. ng-if with animation


ng-ifにAnimationを追加できます
☆ポイント☆
angular-animate.jsを読んでangular.module('app', ['ngAnimate']);とモジュール追加すること
CSSでアニメーション情報を指定してあげること
jsFIddleの.ng-enter ,.ng-leave, .ng-leave.ng-leave-active, .ng-enter.ng-enter-activeを参照

05. ng-show


ng-showも要素の表示・非表示ができます。
☆ポイント☆
display:none;で表示・非表示を切り替えてます。

06. ng-show with animation


ng-showも要素の表示・非表示ができます。
☆ポイント☆
Migrating from 1.2 to 1.3
https://docs.angularjs.org/guide/migration
書き方がかわったみたい
Migrating from 1.2 to 1.3




twitterのハッシュタグ

質問やこうした方がいいよ〜とかありましたら、↓につぶやいてください〜

#ng_fukuoka

2014/09/06 その1 AngularJS福岡勉強会(第2回) - form -

01. form.input.$invalid


必須入力のinputが空の場合にテキストボックスの枠を赤くする
☆ポイント☆
 form name="fm"   で fmというFormControllerが使えるようになります。
 input name="inputCd" でfm.inputCdにNgModelControllerが使えます。

02. form.input.$invalid と form.$invalid


form全体でエラーがあるのか項目単位でエラーがあるのか判別できます。
☆ポイント☆
 fm.inputCd.$invalid って書くと個別で不正が無いか確認
 fm.$invalid って書くとform全体で不正が無いか確認できます

03. form.input.$error


$errorで細かいエラーを判別出来ます。
☆ポイント☆
$error.required で必須チェックでエラーなのか
$error.maxlength で最大長でエラーなのか
$error.pattern で許されないパターンの入力なのか判別できます。

04. ngFormで formの入れ子


formを入れ子にして分割出来ます。
☆ポイント☆
ngFormで入れ子にできる
でも標準のHTML5のバリデーションはngFormに気づかない...
しかたないので novalidate で機能をOFF!

05. ngFormをngRepeatで繰り返す


ng-formはng-repeatの中で繰り返しつかえます。

おまけ blurの時に ng-modelを更新したいなぁ


どうやら1.3からng-model-options="{ updateOn: 'blur' }"って指定すると
blurイベント時にng-modelを更新するようにできるらしい!
1.2を使っている方は自分でカスタムディレクティブを作りましょう〜。
stackoverflow:How to let ng-model not update immediately?
http://stackoverflow.com/questions/14722577/how-to-let-ng-model-not-update-immediately




twitterのハッシュタグ

質問やこうした方がいいよ〜とかありましたら、↓につぶやいてください〜

#ng_fukuoka