메시지를 로드하기 위한 ng-clock의 반대

메시지를 로드하기 위한 ng-clock의 반대

이게 앵귤러에 있는지는 모르겠지만JS 프레임워크입니다만, 기본적으로는 페이지가 컴파일 될 때까지 요소를 숨기는 ng-cloak의 반대입니다.페이지가 컴파일 될 때까지 전체 화면 로딩 메시지를 표시하는 방법을 찾고 있었습니다.이 문제를 해결할 수 있는 언어가 있습니까?

다음과 같이 다소 진부한 방법으로 해결했습니다.다음 HTML이 메인 페이지 끝에 추가됩니다.

<div ng-show="::false" style="position: fixed; height: 100%; width: 100%; background-color: #353535; top: 0; left: 0; z-index: 10000;">
    <div style="display: table; margin: 0 auto; font-size: 26px; color: #CCC;">
        Loading
    </div>
</div>

이 메시지는 페이지가 컴파일될 때까지 브라우저 전체에 걸쳐 표시됩니다.이 시점에서 ng-show가 메시지를 이어받아 숨깁니다.

편집: 각도 1.3+를 사용하면::모든 다이제스트 사이클에서 식을 평가하지 않도록 expression을 지정합니다.https://docs.angularjs.org/guide/expression#one-time-binding

<div ng-show>Loading Results...</div>

ng-show속성 지정 없이 컴파일하다false

css를 사용하여 이 동작을 아카이브할 수 있습니다.

클래스 만들기:

.splash {
  display: none;
}

[ng-cloak].splash {
  display: block !important;
}

그리고 다음 사항을 추가합니다.

<div class="splash" ng-cloak> Loading... </div>

각도 코드가 로드되기 전에 표시되고 각도 코드가 완료된 후 숨겨집니다.앵글 코드도 ng-clock으로 감싸는 것을 잊지 마세요.

<div ng-cloak> Your code... </div>

이것이 도움이 되었습니다.

https://codepen.io/garethdweaver/pen/PqKLyB

&:를 사용하지 않고 사용할 수 있지만, 여기에 아이디어가 잘 나타나 있고, 이를 바탕으로 한 저의 판단은 다음과 같습니다.

  .cloak-loader
    display: none !important

  [ng-cloak].cloak-loader
    position: relative
    display: block !important
    .loader
      height: 50px
      display: flex
      justify-content: center
      align-items: center

언급URL : https://stackoverflow.com/questions/22052384/opposite-of-ng-cloak-for-loading-message