ng-ifのクロスプラットフォームアプリでUIを表示するのに遅延があります

Question

MonacaとAngularJSを使用してクロスプラットフォームアプリケーションを構築しました。私は一般的なビューを表示し、NG-IFとを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のブール値はコントローラで定義されていますが、初期化されていません。ルックアップが完了した後にのみ開始されます。

私は、表示する1知っているまで、どのように表示さからNG-含まの両方を停止することができますか？

私は別の NG-場合を作成することができますが、それは長い息切れや非効率です。

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> 

これはどちらもグラムことを確実にするでしょう：あなたがそうのようなfalseをtrueため厳密な比較演算子===を使用することができ、ユーザーがログインしている天気予報をチェックあなたの "ルックアップ"の結果まで表示されます。

ルーティングの選択に応じて、この問題のもう1つの解決方法は、ngRoute'またはui-routerのresolveプロパティを使用することです。これにより、ビューがロードされる前にユーザーがログインしているかどうかを確認できます。