Angular式が一瞬出るのを解決。

Level 1｜｜2016/06/28

AngularJSを使っていると、ページロード時に、一瞬Angular式が出てきます。こりゃちゃっさいので、その解決法です。また、「アズ勉。」ページの制作時に、ちょっとつまづいたことも一緒に解決します。

Angular式が一瞬出るのを解決

AngularJSを使ったサンプルを作っていたら、ページロード毎にAngular式の{{msg}}がチラつくことがありました。これは、AngularJSが読み込まれ、処理をするまでのタイムラグによって、表示されてしまうためです。

チラつき解決法

方法は2つ。
 
1）Angular式を使わない場合は、「ng-bind」属性
2）Angular式を使う場合は、「ng-cloak」属性
上記2つは、ともにAngularJSの処理が終わるまで非表示にします。

<HTMLtag ng-bind="'3'+'5'"></div>

HTMLtagのidやClassを指定する際と同じように、ng-bing=""で指定します。

<HTMLtag ng-cloak>{{msg}}</div>

HTMLtagに「ng-cloak」と付加します。
bodyタグにも付加できますが、その場合、Angular式すべてが非表示になります。それでいいって場合はbodyタグに、それは無理って場合は任意のタグに付加しましょう！

HTMLファイル

<div ng-cloak>{{msg}}</div>
            

CSSファイル

[ng\:cloak], 
[ng-cloak], 
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}
            

ng-cloak属性の有無で比較してみてください。と付加します。
bodyタグにも付加できますが、その場合、Angular式すべてが非表示になります。
それでいいって場合は、bodyタグに、それは無理って場合は、任意のタグひとつずつに付加しましょう！