Question

我正在将AngularJS与Firebase一起用于webapp。我使用Firebase作为用户身份验证。每个用户的个人资料中都有一封电子邮件，如果他们没有设置电子邮件，我想向用户显示警告。但是，当用户登录并正确设置其电子邮件时，警告会在页面顶部闪烁一瞬间。我已经发现这是因为用户对象在最初的几毫秒内没有完全加载，所以即使设置了电子邮件也会显示警告。如果我用假变量替换！（user.email），警告永远不会出现。变量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>

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

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

Answer 2

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

Answer 3

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

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

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

Answer 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

AngularJS - ng-show显示对象加载时的内容

4 个答案: