KatsuYuzuのブログ

.NET の開発をメインとした日記です。

angularjsで画面表示時に実行前の式が表示されないようにするng-cloak

angularjsで画面表示時に実行前の式が表示されないようにするng-cloak。何も対策せずに実行すると画面表示時に一瞬だけ{{hoge.piyo}}と見えたりします。それの対策。

環境

  • TypeScript 1.4
  • AngularJS 1.4.1

ng-cloak

HTMLで隠したい領域にng-cloakという属性を付けて、CSSの属性セレクターで非表示にするだけです。

<div ng-cloak>
    {{hoge.piyo}}
</div>
[ng-cloak] {
  display: none !important;
}

ng-cloak属性はangularjsのコンパイル時に削除されます。つまり、CSSで非表示にしていた属性が削除され、表示されるようになるということです。

document.titleをangularjsで制御する

似たような事象でdocument.titleで{{hoge.title}}とすると一瞬だけブラウザのタイトルに式が見えてしまいます。これはng-bindを使うことで解決します。

<!--
    angularjs の初期化前に expression が表示されないように初期値と ng-bind の両対応
-->
<title ng-bind="hoge.title">CLR/H ~Cafe~</title>

ソース

github.com

勉強会で紹介しました

clrh.connpass.com