フリーランス チャレンジ!!

フリーランス チャレンジ!!

週休4日制に俺はなる!

【AngularJs】ng-cloakで画面のちらつきを抑える

f:id:ksakae1216:20160911092817p:plain

みなさん、コウタロウです!!

 

今日はタイトルについて。

 

 

画面のちらつきを防止

AngularJsを使っていると、意外と想定しないケースでハマることが多い。

 

私が遭遇したのは、タイムリーフ(Thymeleaf)を使ったシステムでモーダルダイアログ、アラートを表示する際に画面がちらつく。

 

画面が下にずれ、モーダルが一瞬表示されてから、その画面が元に戻り、モーダルダイアログが表示される。

 

CSSのfadeを使ったりしたが、モーダルダイアログが出てくるまで表示が消えてしまうのは、なんかしっくりこない。

 

そんな悩みを解決するのが「ng-cloak」。

 

使い方

ng-cloakの詳細は下記を参照下さい。

ngCloak | AngularJS 1.2 日本語リファレンス | js STUDIO

 

AngularJsを読み込み、使いたい箇所に"ng-cloak"を記載するだけです。

gist9e0a5cbced0fcf01453e94a05c49a2dc

 

最後に

本当は一番てっとり早いのは、bodyにng-cloakを指定することですが、全ての画面で表示が完了するまで画面が表示されなくなってしまうので望ましくありません。

 

画面のちらつきが気になる部分だけ、適用するようにして下さい。