ng-if에서 교차 플랫폼 앱의 UI 표시 지연

Question

Monaca 및 AngularJS를 사용하여 교차 플랫폼 앱을 구축했습니다. 일부 화면에

내가 일반적인보기를 표시 한 다음 사용하여 일부 계산/조회의 결과에 따라 특정 섹션을 표시 NG-경우 및 이을 NG-있습니다.

예. 로그인 화면의 경우 사용자가 이전에 로그인했는지 여부를 컨트롤러에서 확인하는 동안 일반보기를 표시합니다. 이 조회의 결과에 따라 환영 메시지가 표시되거나 사용자에게 로그인하라는 메시지가 표시됩니다.

다음은 일반 로그인보기의 축약 된 버전입니다.

<div> 
    <ons-page> 
     <ons-scroller > 
      <!-- Show if user not logged in --> 
      <div ng-if="!loggedIn"> 
       <div ng-include="'login/login-details.html'"></div> 
      </div> 
      <!-- Show if user logged in --> 
      <div ng-if="loggedIn"> 
       <div ng-include="'login/login-confirmation.html'"></div> 
      </div> 
     </ons-scroller> 
    </ons-page> 
</div> 

이 잘 작동하지만,이 문제는 제 NG-경우가 항상 표시되어있다 - 심지어 단지 초 - 사용자가 다음에 기록되어있는 경우 제어부 검사 동안은 값을 설정 loggedIn입니다. 따라서 컨트롤러가 변수 loggedIn에 대해 true 또는 false를 반환 할 때까지 사용자는 항상 로그인 프롬프트를 보게됩니다.

의 부울 값 loggedIn은 컨트롤러에서 정의되었지만 초기화되지 않았습니다. 조회가 완료된 후에 만 ​​시작됩니다.

내가 표시 할 일을 알고 때까지 어떻게 표시에서 NG-포함의 양을 중지 할 수 있습니다?

ng-if을 작성할 수 있지만 길어지고 비효율적 인 것처럼 보입니다.

는

Answer 1

나는 또한 NG 쇼를 사용하고 그들이 NG 숨기기 클래스를 사용하여 평가 될 때까지 항목을 숨겨, 아래 참조 : loggedIn이 null 또는 undefined까지 인 경우 사용할 수

<div class="ng-hide" ng-show="!loggedIn"> 
    <div ng-include="'login/login-details.html'"></div> 
</div> 
<!-- Show if user logged in --> 
<div class="ng-hide" ng-show="loggedIn"> 
    <div ng-include="'login/login-confirmation.html'"></div> 
</div> 

Answer 2

한 가지 방법은

<div> 
    <ons-page> 
     <ons-scroller > 
      <!-- Show if user not logged in --> 
      <div ng-if="loggedIn === false"> 
       <div ng-include="'login/login-details.html'"></div> 
      </div> 
      <!-- Show if user logged in --> 
      <div ng-if="loggedIn === true"> 
       <div ng-include="'login/login-confirmation.html'"></div> 
      </div> 
     </ons-scroller> 
    </ons-page> 
</div> 

이도 g 있는지 확인합니다 : 당신은 당신과 같이 false을 true에 대한 엄격한 비교 연산자 ===을 사용할 수 있으며, 사용자가 로그인 한 날씨를 확인 ets는 "조회"의 결과가 표시 될 때까지 표시됩니다.

문제의 또 다른 해결 방법은 라우팅 선택에 따라 ngRoute' 또는 ui-router의 resolve 속성을 사용하는 것입니다. 이렇게하면보기가로드되기 전에 사용자가 로그인했는지 확인할 수 있습니다.