[javascript] Angularjs-ng-cloak / ng-show 요소가 깜박임

설명서에 언급되어 있지 않지만 display: none;CSS에 규칙을 추가하는 것만으로는 충분하지 않을 수 있습니다 . 당신이 몸에 로딩 angular.js 또는 템플릿을 사용, 곧 컴파일되지 않습니다 경우에 ng-cloak지시를 하고 당신의 CSS에 다음을 포함한다 :

/*
  Allow angular.js to be loaded in body, hiding cloaked elements until
  templates compile.  The !important is important given that there may be
  other selectors that are more specific or come later and might alter display.
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

의견에서 언급했듯이이 !important것이 중요합니다. 예를 들어 다음과 같은 마크 업이있는 경우

<ul class="nav">
  <li><a href="/foo" ng-cloak>{{bar}}</a></li>
</ul>

를 사용 bootstrap.css하는 경우 다음 선택기가 ng-cloak‘ed 요소에 더 구체적입니다.

.nav > li > a {
  display: block;
}

따라서 단순히을 사용하여 규칙을 포함하면 display: none;Bootstrap의 규칙이 우선하고 display가로 설정되어 block템플릿이 컴파일되기 전에 깜박임을 볼 수 있습니다.

답변

[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none;
}

<ng-include src="'views/indexMain.html'"></ng-include>

<div ng-show="foo != null" ng-cloak>{{name}}</div>  <!-- requires CSS -->
<div ng-show="foo != null" ng-bind="name"></div>
<div ng-show="foo != null" ng-bind-template="name = {{name}}"></div>

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

.button-outline {
  -webkit-transition: opacity .1s;
  transition: opacity .1s;
}

.ng-hide-add,
.ng-hide-remove {
  display: none !important;
}