<h1>Example: ngCloak</h1>
<p>AngularJSの初期化処理が完了するまで{{ myName }}がそのまま表示されてしまう問題を解決します。</p>
<div ng-app>
  <input type="text" ng-model="myName" placeholder="yourName">
  <p ng-cloak>{{ myName }}</p>
  <p>{{ myName }}</p>
</div>
@import "bourbon";

body {
  padding: 1.5rem;
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js