ng-cloak 디렉티브를 올바르게 사용하는 방법
어찌된 일인지 앵귤러로 ng-cloakJS가 안 돼요.페이지를 로드하는 동안 {{ }}을(를) 숨기고 싶습니다.끔찍해 보이니까.
<!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 문서에서:
최상의 결과를 얻으려면
angular.js스크립트는 html 문서의 선두 섹션에 로드해야 합니다.그렇지 않으면 위의 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가 템플릿을 컴파일하기 전에 브라우저에 raw 상태로 일시적으로 표시되는 경우 {{ 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만큼 복잡하지 않습니다.모든 요구가 완료될 때까지 모든 것을 숨깁니다.
나의 해결책은 위의 제안들을 모두 시도해봤지만 아무 소용이 없었다고 생각한다.ng-include를 사용하는 사람도 있습니다만, 조금 많은 것 같습니다.또, 내부 스코프가 작성되어 있으면 무서울 수도 있습니다.그래서 스타일과 ng스타일로 시도했어요.영향을 받은 내 메인 디바.
<div class="container" style="display:hidden;" ng-style="loaded">
그런 다음 베이스 컨트롤러에 로드된 스코프 변수를 설정합니다.
$display.loaded = {표시: 'block'};
그 {{}}는 아직 다 가지고 있습니다.angularjs가 로드된 경우에만 차단하도록 설정된 디스플레이가 이상합니다. 그 후 Firefox f12 개발자 콘솔이 실행되고 있는 것을 알게 되었습니다.그것은 하는 것이다.바보 같은 나
각도 1.3 이후 ng-app 속성이 작동하려면 ng-app 속성의 이름을 지정해야 합니다.
<html lang="en" ng-app="myApp">
JS:
angular.module("myApp",[])
그러면 각도가 부트스트랩으로 바뀝니다.
다만, 현시점에서는, 페이지 하단의 각도로 로딩하고 있기 때문에, 로딩에 시간이 걸립니다. ""에는합니다.ng-cloak는 아직 사용할 수 없습니다.
「」를 .jsCSS, CSS, CSS, CSS, CSS, CSS, CSS, CSS.
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
저는 위의 모든 답변과 그 이상의 많은 답변을 시도했지만 아무런 도움도 받지 못했습니다.로드될 때마다 내 페이지가 깜박거린다.저의 해결책은 바디 태그 뒤에 이것을 추가하는 것이었습니다.
<div style="display:flex" opacity=0>
<status-progress></status-progress>
<h3>Loading... </h3>
</div>
페이지의 모든 내용을 정리하려면:
<div class="loaded" style="opacity: 0" opacity=1> ... </div>
지시:
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);
}
}
}
페이지가 "스모터"로 표시되도록 유형 시트는 다음과 같습니다.
.loaded{
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
}
이렇게 하면 모든 것이 준비되는 동안 "Loading"이 1초간 표시됩니다.
결과를 못했기 에, 는 이 와 매우 했습니다.ng-cloak코드를 포장으로 묶습니다.$timeout $digest 및 class을 삭제합니다.이 내가 수 이었다.{{}}바인딩을 지정합니다.
angular.directive('myCloak', function($timeout) {
return {
restrict: 'A',
compile: function (element, attr) {
$timeout(function () {
attr.$set('myCloak', undefined);
element.removeClass('my-cloak');
});
}
};
});
또한 이 새로운 속성/클래스에 커스텀 css 규칙을 추가해야 합니다.
[my\:cloak], [my-cloak], [data-my-cloak], [x-my-cloak], .my-cloak, .x-my-cloak {
display: none !important;
}
여기서 권장하는 수정 프로그램을 사용하면 도움이 됩니다.
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")
ng-cloak을 사용할 수 없는 경우 ngBind를 사용합니다.
<p ng-show="!isShow" ng-bind="isShow"></p>
언급URL : https://stackoverflow.com/questions/29339293/how-to-correctly-use-ng-cloak-directive
'programing' 카테고리의 다른 글
| 리액트 기능 컴포넌트의 lodash debouncomponent (0) | 2023.03.18 |
|---|---|
| React를 위한 부트스트랩과 머티리얼 UI의 비교 (0) | 2023.03.18 |
| 다른 구성 요소 경고를 렌더링하는 동안 구성 요소를 업데이트할 수 없습니다. (0) | 2023.03.18 |
| Angularjs의 templateUrl을 사용하여 템플릿을 로드할 수 없습니다. (0) | 2023.03.18 |
| NodeJs - JWT 토큰에서 사용자 정보를 검색하시겠습니까? (0) | 2023.03.18 |