source

페이지 로드 시 표현식 표시 안 함

ittop 2023. 9. 19. 21:25
반응형

페이지 로드 시 표현식 표시 안 함

앵귤러에서JS 비디오는 자바스크립트가 파싱하기 전에 표현이 보이지 않게 하는 방법을 보았습니다.하지만 어떻게 된 일인지 기억이 안 나요...

저는.<div id='message'>{{$root.initializing.status}}</div>"로딩.."이라고 말하고 싶습니다.." 앵귤러 이전JS가 파싱할 기회가 있습니다.이것이 어떻게 행해지는가?

다른 사람들이 언급한 것처럼 ng-cloock을 사용하되 페이지에 처음 로드하는 경우 다음을 CSS에 추가합니다.

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

그러면 div 템플릿이 숨겨집니다.디브 템플릿 아래에 다음과 같은 것을 추가합니다.

Loading...

$root의 할당입니다.ng-hide에 대해 true 값을 발생시키는 initializing.status.

다음은 jsfiddle이고 코드는 다음과 같습니다.

HTML:

<div ng-controller='Ctrl'>
    <div id='message'>{{$root.initializing.status}}</div>
    <div ng-hide="$root.initializing.status">Loading...</div>
</div>

JS:

function Ctrl($timeout, $scope) {
///simulating loading
    $timeout(function () {
        $scope.$root = {
            initializing: {
                status: 'Complete!'
            }
        }
    }, 2000);
}

cloak http://docs.angularjs.org/api/ng.directive:ngCloak 을 사용합니다.

<div id="template1" ng-cloak>{{ 'hello' }}</div>

bind http://docs.angularjs.org/api/ng.directive:ngBind

Hello <span ng-bind="name"></span>!

https://stackoverflow.com/a/14076004/1172872

<div id='message'><span ng-bind="$root.initializing.status"></span></div> 

ngCloak을 사용하여 식을 숨길 수 있으며, 다음 답변을 참조하십시오.

angular.js가 컴파일/인터폴레이트 문서를 작성하기 전에 일시적으로 이중 곱슬곱슬한 중괄호 표기법이 표시되지 않도록 합니다.

로딩 표시는 $root만 설정하시면 됩니다.initializing.status를 기본값인 "Loading"으로 설정한 후 데이터를 가져오면 재설정합니다.

사용하다ng-cloak페이지 로드 시 깜박임을 방지하기 위한 지시.

만약 누군가 이 정보가 유용하다고 생각할 경우를 대비하여, 저는 다음 작업을 사용하고 있습니다.

<div ng-class="{'hide', '': ctrl.pageLoaded}">...</div>

그리고.

.hide{display: none;}

컨트롤러가 로드될 때까지 각도 표현으로 사용되는 모든 내용을 숨기기 위해 사용합니다.this.pageLoaded = true.

언급URL : https://stackoverflow.com/questions/17091364/avoiding-expressions-being-shown-on-page-load

반응형