AngularJS - ng-show 在对象加载时显示内容答案

【问题标题】：AngularJS - ng-show shows content while objects loadAngularJS - ng-show 在对象加载时显示内容
【发布时间】：2016-01-26 06:26:23
【问题描述】：

我正在将 AngularJS 与 Firebase 一起用于 web 应用程序。我使用 Firebase 作为用户身份验证。每个用户的个人资料中都有一封电子邮件，如果他们没有设置他们的电子邮件，我想向用户显示警告。但是，当用户登录并正确设置了他们的电子邮件时，警告会在页面顶部闪烁一秒钟。我发现这是因为用户对象在前几毫秒内没有完全加载，所以即使设置了电子邮件也会显示警告。如果我将 !(user.email) 替换为 false 变量，则警告永远不会出现。变量 user.email 由 Firebase 直接控制。

<div ng-show="user">
   <div class="row" ng-show="!(user.email)">
       <div class="col-md-12">
         <div class="alert alert-warning">
           Warning! You must...
         </div>
       </div>
    </div>
</div>

有什么方法可以让警告不显示？

【问题讨论】：

你不需要() 来包装user.email。
@AnikIslamAbhi 谢谢
你是否一直在闪烁？如果是，请发布您的完整 HTML 和控制器

标签： javascript angularjs firebase

【解决方案1】：

您可以添加ng-hide 类以默认隐藏元素。加载对象后，ng-show 指令将启动并根据需要添加或删除 ng-hide 类。

<div ng-show="user">
   <div class="row ng-hide" ng-show="!(user.email)">
       <div class="col-md-12">
         <div class="alert alert-warning">
           Warning! You must...
         </div>
       </div>
    </div>
</div>

ng-hide 类和重写某些行为的方法详述here。

【讨论】：

这么奇怪的问题
@TheSabreSlicer 这可能是因为ng-hide 样式也不会立即加载。理想情况下，您应该内联这些重要的样式。我仍然建议只添加类而不是弄乱模型。

【解决方案2】：

user.email 中应该有一些模拟值。这可以通过控制器或ng-init 来完成。

在加载用户时，您应该检查配置文件中的电子邮件并将user.email 设置为该用户或删除该属性。

如果user 对象受另一个脚本的控制，您应该为ng-show 使用另一个范围变量。您应该使用模拟值初始化此变量，并在加载用户后使用user 对象对其进行更新。

【讨论】：

用户自动绑定到firebase，我尝试使用ng-init将其设置为true，但它仍然闪烁。
为ng-show 使用另一个范围变量，并在加载用户时更新它。答案已更新。

【解决方案3】：

看看 ng-init。您可以使用它在加载时初始化默认值。

【讨论】：

我尝试用它来初始化user.email = true，它仍然闪烁。我认为因为 user.email 使用 AngularFire 通过 3 路数据绑定绑定到 firebase，所以我无法真正覆盖它。

【解决方案4】：

<div class="ng-hide" ng-show="user && !user.email" ng-cloak>
   <div class="row >
       <div class="col-md-12">
         <div class="alert alert-warning">
           Warning! You must...
         </div>
       </div>
    </div>
</div>

https://docs.angularjs.org/api/ng/directive/ngCloak

【讨论】：