『AngularJSリファレンス』ビルトインディレクティブ・DOM操作 の補足

AngularJSリファレンス

第2章はAngularJSに組み込みのディレクティブの解説なのだけど、ところどころ説明不足で疑問点を自分で調べる必要があったので、補足を書いてみる。

ngCloak

本書のサンプルコード(p.17)は↓のようになっているが、これだと<p ng-bind="myName"></p>との違いが分からない。

<p ng-cloak>{{ myName }}</p>

実際のところ、ngCloakはもっと汎用的に使える。たとえば、<body ng-cloak>としてやれば、AngularJSの処理が終わるまで一切画面が表示されない。より推奨される使い方としては、ngCloakを細かな単位に分割して適用し、処理が完了したところから表示していくほうが良い。たとえば、リストの描画完了に時間がかかるときに、リストにだけng-cloakを指定する等。

ngCloakの実際の処理の流れは以下のとおり。

  1. ngCloakが設定されている要素にはCSSでdisplay:noneが指定されるので、画面上には何も表示されない
  2. 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のサンプルを追加。

コメントをどうぞ

コメントを残す