第2章はAngularJSに組み込みのディレクティブの解説なのだけど、ところどころ説明不足で疑問点を自分で調べる必要があったので、補足を書いてみる。
ngCloak
本書のサンプルコード(p.17)は↓のようになっているが、これだと<p ng-bind="myName"></p>
との違いが分からない。
<p ng-cloak>{{ myName }}</p>
実際のところ、ngCloakはもっと汎用的に使える。たとえば、<body ng-cloak>
としてやれば、AngularJSの処理が終わるまで一切画面が表示されない。より推奨される使い方としては、ngCloakを細かな単位に分割して適用し、処理が完了したところから表示していくほうが良い。たとえば、リストの描画完了に時間がかかるときに、リストにだけng-cloakを指定する等。
ngCloakの実際の処理の流れは以下のとおり。
- ngCloakが設定されている要素にはCSSでdisplay:noneが指定されるので、画面上には何も表示されない
- ngCloakを指定した要素がcompileされるタイミングでngCloakの指定が取り除かれ、画面上に要素が表示される
以下がソースだが、仕組みは超簡単。
var ngCloakDirective = ngDirective({
compile: function(element, attr) {
attr.$set('ngCloak', undefined);
element.removeClass('ng-cloak');
}
});
ngCloakのソース(https://github.com/angular/angular.js/blob/master/src/ng/directive/ngCloak.js)
ng-repeat-start/end
本書(p.27)だと、
ng- repeat-start と ng-repeat-end で、明示的にループ開始と終了を宣言することも可能です
とあるのだけど、これだと何が嬉しいのか分かりづらい(私は分からなかった)。ng-repeat-start/endは、以下のように、複数要素に渡る繰り返しを実装したい時に使う(以下のコードだと、dtとddのペアが繰り返し表示される)。
<dl>
<dt ng-repeat-start="term in terms">term.name</dt>
<dd ng-repeat-end>term.description</dd>
</dl>
ng-repeatだと、1要素の繰り返ししかできないけど、ng-repeat-start/endを使うと、dt+ddや、その他様々な組み合わせで要素を繰り返すことができる。
12/30 14:43 追記
動作確認のためjsFiddleのサンプルを追加。