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

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

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

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

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

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

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

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

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

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

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

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