ng-cloak 지시문을 올바르게 사용하는 방법은 무엇입니까?
어쨌든 AngularJS의 ng-cloak이 작동하지 않습니다. 페이지를로드하는 동안 {{}}을 숨기고 싶습니다. 끔찍해 보이기 때문입니다.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Angular Sample</title>
</head>
<body ng-model="isShow" ng-init="isShow=true">
<p ng-show="isShow"><span ng-cloak>{{ isShow }}</span></p>
<p ng-show="!isShow"><span ng-cloak>{{ isShow }}</span></p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</body>
</html>
여기 에서이 CSS 추가
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
상위 div 또는 앱을 정의한 모든 위치에서 클래스 이름 또는 속성을 사용합니다.
예 :
<div ng-app="Random" class="ng-cloak">
</div>
에서 각 문서 :
최상의 결과를 얻으려면
angular.jshtml 문서의 헤드 섹션에 스크립트를로드해야합니다. 또는 위의 CSS 규칙이 애플리케이션의 외부 스타일 시트에 포함되어야합니다.
CSS에서 다음 규칙을 지정해야합니다.
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
ngBind를 사용하면이를 제거 할 수 있습니다 (때때로 SharePoint에서 개발하고 ngCloak이 작동하지 않습니다).
AngularJS 문서 :
Angular가 컴파일하기 전에 템플릿이 원시 상태로 브라우저에 일시적으로 표시되는 경우 {{expression}} 대신 ngBind를 사용하는 것이 좋습니다. ngBind는 요소 속성이므로 페이지가로드되는 동안 바인딩이 사용자에게 보이지 않게합니다.
이 문제에 대한 대안은 ngCloak 지시문을 사용하는 것입니다.
JS :
var app = angular.module('test', []);
app.controller('testCtrl', ['$scope', function($scope) {
$scope.test = "Hello World";
}]);
HTML :
<html ng-app="test">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
<h1 ng-bind="test"></h1>
</body>
</html>
css 파일에 아래 추가 :-
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
제 경우에는 내 문제가 보류중인 ajax 요청으로 인한 것이라고 생각했습니다. Ng-cloak은 아마도 정적 콘텐츠에 대해 작동하지만 템플릿이 ajax 데이터에 의존하는 경우 ajax 응답을 받기 전에 렌더링됩니다.
그것을 피하기 위해 지시문을 정의합니다.
앙구
mymodule
.directive("ajaxCloak", ['$interval', '$http', function ($interval, $http) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
let stop = $interval(() => {
if ($http.pendingRequests.length === 0) {
$interval.cancel(stop);
attrs.$set("ajaxCloak", undefined);
element.removeClass("ajax-cloak");
}
}, 100);
}
};
}]);
약간의 CSS 사용 :
[ajax-cloak], [data-ajax-cloak], [x-ajax-cloak], .ajax-cloak {
display: none !important;
}
그런 다음 기본 HTML 파일에서 :
<div ui-view data-ajax-cloak></div>
참고 : 이것은 ng-cloak만큼 정교하지는 않습니다. 이것은 전역 cloack이기 때문에 모든 요청이 완료 될 때까지 모든 것을 숨 깁니다.
My solution I think i tried all of above suggestions but nothing worked. Some uses ng-include but it seems a little bit to much, further it could be scary with the inner scope that gets created. So it tried it by using style and ng-style. In my affected main div.
<div class="container" style="display:hidden;" ng-style="loaded">
Then I set the scope variable loaded in my base controller.
$scope.loaded ={display:'block'};
Still got all those {{ }}. Weird when display sets to block only when angularjs has loaded. Then I noticed that I had the firefox f12 developer console running. Its doing stuff. Stupid me
From angular 1.3 onwards, you must specify a name for ng-app attribute for it to work.
<html lang="en" ng-app="myApp">
IN your JS:
angular.module("myApp",[])
This will make the angular to bootstrap.
But for the current situation, as you are loading angular at the bottom of the page, it's taking time to load. So the css required for the ng-cloak is not available yet.
Either move the js to the tag or load the specific CSS code to your CSS to make it work.
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
I have tried all of the answers above and a lot beyond, with no help. My (large) page would flicker on each load. My solution was to add this just after body tag:
<div style="display:flex" opacity=0>
<status-progress></status-progress>
<h3>Loading... </h3>
</div>
and to wrap everything in the page:
<div class="loaded" style="opacity: 0" opacity=1> ... </div>
directive:
app.directive('opacity', opacity);
function opacity($timeout) {
return {
link: function (scope, element, attrs) {
var value = attrs.opacity;
$timeout(function () {
element[0].style.opacity = value;
},500);
}
}
}
To make the page appear "smoother", the stylesheet:
.loaded{
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
}
This way, you see "Loading" for 1sec, while everything is getting ready.
Since none of these answers gave me the desired result, I accomplished what I wanted by creating a directive very similar to ng-cloak but wrapping the code in a $timeout so that it will wait until the end of the $digest cycle to remove the cloaking attribute and/or class. This was the only way I was able to truly hide the {{}} bindings in the browser.
angular.directive('myCloak', function($timeout) {
return {
restrict: 'A',
compile: function (element, attr) {
$timeout(function () {
attr.$set('myCloak', undefined);
element.removeClass('my-cloak');
});
}
};
});
And don't forget, you will have to add a custom css rule for this new attribute / class:
[my\:cloak], [my-cloak], [data-my-cloak], [x-my-cloak], .my-cloak, .x-my-cloak {
display: none !important;
}
Using the fix recommended here works for me...
https://github.com/opitzconsulting/jquery-mobile-angular-adapter/issues/167
CSS:
.my-cloak {
display: none !important;
}
JS:
$scope.$on('$viewContentLoaded', function(){
$('.my-cloak').removeClass('my-cloak');
});
HTML:
div(class="my-cloak")
Use ngBind when ng-cloak is not available.
<p ng-show="!isShow" ng-bind="isShow"></p>
참고URL : https://stackoverflow.com/questions/29339293/how-to-correctly-use-ng-cloak-directive
'IT박스' 카테고리의 다른 글
| MySQL의 열에있는 일부 값에 선행 0 추가 (0) | 2020.11.13 |
|---|---|
| Java Enum 반환 Int (0) | 2020.11.13 |
| Elixir 변수는 정말 불변입니까? (0) | 2020.11.13 |
| C # "finally"블록이 항상 실행됩니까? (0) | 2020.11.13 |
| 내 텍스트 영역의 자리 표시자가 표시되지 않는 이유는 무엇입니까? (0) | 2020.11.13 |