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>