티스토리 뷰
발생일: 2015.01.01
키워드: angular, AngularJS, ng-clock, ngClock, 템플릿
문제:
앵귤러로 앱을 만들었는데, 페이지에 들어가면 렌더링 되지 않은 템플릿 때문에 깜빡거린다.
뭔가 해결 방법이 있을 것 같은데...
해결책:
앱이 로드되기 전에 템플릿이 포함된 화면이 깜빡거리는 경우, `ng-cloak` 디렉티브를 사용하면 된다.
`<body>`나 `ng-app` 속성을 정의한 태그에 `ng-clock` 속성을 할당하는 방식으로 처리할 수 있다.
<html ng-clock ng-app=“sampleApp”>
`ng-clock`은 디렉티브가 정의된 엘리먼트를 `display:none` 시켰다가, 앱이 준비되면 보여주는 방식으로 처리하는데,
크롬 익스텐션처럼 CSP(Content Security Policy)가 적용되어 있는 경우엔 아래 CSS 룰을 별도로 정의해줘야 한다.
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
이 스타일은 `angular.js`에 포함되어 있고, CSP가 적용되지 않는 환경에선 올바르게 동작한다.
반응형
댓글
공지사항