在 ng-if 上的跨平台应用程序中延迟显示 UI

Posted 2023-05-06

【中文标题】在 ng-if 上的跨平台应用程序中延迟显示 UI

【英文标题】：Delay displaying UI in cross platform app on ng-if

【发布时间】：2017-08-15 05:55:39

【问题描述】：

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

在某些屏幕上，我显示一个通用视图，然后根据使用 ng-if 和 ng-include.

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

下面是通用login视图的缩略版。

<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-if 总是显示 - 即使只是一秒钟 - 而控制器检查用户是否已登录in 然后设置 loggedIn 的值。因此，用户始终会看到登录提示，直到控制器在变量 loggedIn 上返回 true 或 false。

loggedIn 的布尔值只是在控制器中定义但未初始化。它只有在查找完成后才会启动。

我怎样才能阻止两个 ng-include 的显示，直到我知道要显示哪一个？

我可以创建另一个 ng-if，但它似乎冗长且效率低下。

【问题讨论】：

我不确定，但也许ng-cloak 会有所帮助。如果不只是添加 ng-show 与 ng-if 中相同的条件。

我不知道你的控制器/服务中发生了什么，但你可能没有使用承诺。

@Ben Beck - 不，我没有使用承诺。我正在使用异步调用来检查用户是否已登录，这使得查找时间更长。我会尝试 ng-cloak，如果不行，我会实现一个承诺。

也可能是您的登录回调机制不是基于角度的（即由window.addEventListener 之类的东西触发），那么回调不是角度感知的，也不会触发摘要。然后一个简单的$scope.$applyAsync() 就解决了这个问题。此外，一秒钟的延迟听起来像角度自动摘要触发器。

【参考方案1】：

我还将使用 ng-show 并隐藏项目，直到使用 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>

【参考方案2】：

您可以使用的一种方法是如果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>

这将确保在您的“查找”结果之前都不会显示。

根据您选择的路由，该问题的另一个解决方案是使用ngRoute's 或ui-router 的resolve 属性。这样您就可以在视图加载之前检查用户是否已登录。