Javascript 在ng上的跨平台应用程序中延迟显示UI（如果有）

我有一个使用Monaca和AngularJS构建的跨平台应用程序

在一些屏幕上，我显示一个通用视图，然后根据使用ng if和ng include的一些计算/查找结果显示某些部分

例如，对于登录屏幕，我显示一个通用视图，而在我的控制器中，我检查用户以前是否登录过。根据此查找的结果，我会显示欢迎消息或提示用户登录

下面是通用登录视图的缩写版本

这工作正常，但问题是，控制器检查用户是否登录，然后设置loggedIn的值时，始终显示第一个ng if，即使只显示一秒钟。因此，用户总是看到登录提示，直到控制器在变量loggedIn上返回true或false

刚刚定义了loggedIn的布尔值，但未在控制器中初始化。它仅在完成查找后启动

在我知道显示哪一个之前，如何停止显示两个ng includes

---

如果，我可以创建另一个ng，但它似乎冗长而低效。

我还将使用ng显示和隐藏项目，直到使用ng hide类对其进行评估，请参见以下内容：

<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>

---

我还将使用ng显示和隐藏项目，直到使用ng hide类对其进行评估，请参见以下内容：

<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>

---

您可以使用的一种方法是，如果

loggedIn

为

null

或

undefined

直到您检查用户是否登录，您可以对

true

和

false

使用严格的比较运算符

=

，如下所示：

<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>

这将确保在“查找”结果出来之前都不会显示

---

根据您选择的路由，问题的另一个解决方案是使用s或的

resolve

属性。通过这种方式，您可以在加载视图之前检查用户是否登录。

您可以使用的一种方法是，如果

loggedIn

为

null

或

undefined

，直到您检查用户是否登录，您可以对

true

和

false

使用严格的比较运算符

=

，如下所示：

<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>

这将确保在“查找”结果出来之前都不会显示

---

根据您选择的路由，问题的另一个解决方案是使用s或的

resolve

属性。这样，您可以在加载视图之前检查用户是否已登录。

我不确定，但可能

ng-clope

会有所帮助。如果不只是添加

ng show

，使用与

ng If

相同的条件。我不知道您的控制器/服务中发生了什么，但您可能没有使用承诺。@Ben Beck-不，我没有使用承诺。我使用一个异步调用来检查用户是否登录，这使得查找时间更长。我将尝试ng斗篷，如果这不起作用，我将实现一个承诺。也可能是您的登录回调机制不是基于角度的（即由类似于

窗口的东西触发。addEventListener

），那么回调不是角度感知的，并且不会触发摘要。然后，一个简单的

$scope.$applyAsync（）

解决了这个问题。此外，一秒钟的延迟听起来像是角度自动消化触发器。我不确定，但可能

ng-clope

会有所帮助。如果不只是添加

ng show

，使用与

ng If

相同的条件。我不知道您的控制器/服务中发生了什么，但您可能没有使用承诺。@Ben Beck-不，我没有使用承诺。我使用一个异步调用来检查用户是否登录，这使得查找时间更长。我将尝试ng斗篷，如果这不起作用，我将实现一个承诺。也可能是您的登录回调机制不是基于角度的（即由类似于

窗口的东西触发。addEventListener

），那么回调不是角度感知的，并且不会触发摘要。然后，一个简单的

$scope.$applyAsync（）

解决了这个问题。此外，一秒钟的延迟听起来像是角度自动消化触发器。