AngularJs에서 ng-Cloak 지시어를 실제로 사용하는 방법은 무엇입니까?
- 이 뭐죠?
ng-cloak지시사항? - 왜 쓰는 거죠?
ng-interface(ng-interface.
문서에서:
ngCloak 지시어는 응용 프로그램 로드 중에 Angular html 템플릿이 원시(파일되지 않음) 형식으로 브라우저에 잠시 표시되지 않도록 하기 위해 사용됩니다.html 템플릿 표시로 인한 바람직하지 않은 깜박임 효과를 방지하려면 이 명령을 사용합니다.
간단히 말하면,ng-cloak명령어를 사용하여 컴파일되지 않은 요소가 표시되지 않도록 합니다.컴파일되지 않은 요소는 수신 데이터를 보류하고 대기하는 요소일 수 있습니다.
<div ng-cloak>{{myvar}}</div>
한다면myvar컨트롤러가 아직 컴파일되지 않았거나 데이터가 채워지지 않았습니다.ng-cloak막다{{myvar}}표시되지 않으며 변수가 컴파일될 때만 div가 표시됩니다.
이 코드 예제에 따라 결과를 확인합니다.ng-cloak:
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x- ng-cloak {
display: none !important;
}
</style>
<body ng-controller="MyController" ng-cloak>
<h3>ngCloak Example</h3>
<ol >
<li ng-repeat="item in myData">
{{item.title}}
</li>
</ol>
</body>
var myApp= angular.module("myApp",['ngResource']);
myApp.controller("MyController", ["$scope", "$resource","$timeout",
function($scope,$resource,$timeout){
$scope.myData =[];
var youtubeVideoService = $resource("https://gdata.youtube.com/feeds/api/videos?q=googledevelopers&max-results=5&v=2&alt=jsonc&orderby=published");
youtubeVideoService.get()
.$promise.then(function(responseData) {
angular.forEach(responseData.data.items,
function(aSingleRow){
console.log(aSingleRow);
$scope.myData.push({
"title":aSingleRow.title
});
});
});
}]);
ng-cloak Ben을 사용하는 이유는 유효하지만 Ben에 의해 제공된 예제의 결과는 일부 상황에서 여전히 다음을 표시합니다.{{var}}스크립트가 일반적으로 비동기적으로 로드되거나 HTML 본문 하단에 배치되는 경우 특히 그렇습니다.
Ben의 예에서 그는 다음과 같이 말했다.<style>ng-class는 ng-class를 맨 위에 배치해야 하지만 사용하지 않습니다.<body>이렇게 해서 이 스타일을 사용합니다.
<body class="ng-cloak" ng-controller="MyController" ng-cloak> ...
이렇게 하면 Angular가 ng-cloak을 로 변경할 때까지 바디 태그의 내용이 표시되지 않습니다.display: block또는 디렉티브에 의해 태그가 달린html이 갱신됩니다.
클래스를 추가하는 이유는 html이 표시된 후 ng-cloak 디렉티브가 해석되기 때문에 JS 스레드가 정지하고 다음과 같은 내용이 표시될 가능성이 항상 있기 때문입니다.{{something here}}.
적절한 사용의 좋은 예는 다음과 같습니다.class="ng-cloak"그리고.ng-cloak에 대한 지시ng-repeat지시.
단, {{}}만 귀찮거나 JS 스레드가 크래시 되어도 페이지가 정상이라면 사용하는 것이 좋습니다.ng-bind태그에 추가하지 않고{{}}그 안에.
덧붙이고 싶은 한 가지 주의사항: 대부분의 어플리케이션에서는 ng-cloak을 추가하는 것만으로는 동작하지 않습니다.왜냐하면 그 페이지가 더 크고 그때까지 js가 로드되지 않을 수 있기 때문입니다.
이 디렉티브에 수동으로 CSS를 적용하면 다음 점에 도움이 됩니다.
[ng-cloak]
{
display: none !important;
}
이것이 누군가에게 도움이 되기를 바랍니다!
언급URL : https://stackoverflow.com/questions/28514567/how-to-use-the-actual-use-of-ng-cloak-directive-in-angularjs
'programing' 카테고리의 다른 글
| Angularjs가 트랜스코프 및 바인딩을 분리하여 혼란스러워함 (0) | 2023.03.08 |
|---|---|
| as_json이 어소시에이션으로 as_json을 호출하지 않음 (0) | 2023.03.08 |
| Spring MVC 및 부트를 통한 정적 콘텐츠 갱신 (0) | 2023.03.08 |
| 스프링 부트 및 gRPC 및 Protobuf 사용 (0) | 2023.03.08 |
| 스프링 부팅 시 요청 대상에 잘못된 문자가 있습니다. (0) | 2023.03.08 |