如何让 HTML 代码仅在加载 firebase 查询后显示答案

【问题标题】：How to Get the HTML code to show only after the firebase query is loaded如何让 HTML 代码仅在加载 firebase 查询后显示
【发布时间】：2017-09-24 09:34:02
【问题描述】：

下面是我的 Angular JS webapp 的 JS：

 .controller('rulesCtrl', ['$scope','$location',
 function($scope,$location){


 var uid = CommonProp.userUid();

 firebase.database.ref('users').child(uid).child("fullname").once('value', 
 function(snapshot){
 var users = snapshot.val();
 $scope.fullname = users;
   },function(err) {
    console.log(err);

});

 $scope.logout = function(){
 CommonProp.logoutUser();  
};

下面是 HTML 代码：

<div ng-controller="rulesCtrl"> 
    <div class="container">
        <div class="row">
            <h1>Dear {{fullname}},</h1>
            <p ng-show=""> <br>
            The Players are divided into 4 positions, "DEFENDER", 
           "MIDFIELDER", "FORWARD", and a unique role for the 
            particularly versatile players, "HYBRID".<br/><br><br/></p>

我的问题

我的问题是，有时页面经常加载，{{fullname}} 代码在视图中显示为空，但控制台中的检查显示存在一个值。

有没有办法确保 <p> 标签的内容仅在我的 firebase 查询得到的 {{fullname}} 得到解决后才显示？

【问题讨论】：

标签： angularjs web-applications firebase-realtime-database

【解决方案1】：

问题在于 firebase 代码在 angular 上下文之外，因此当 firebase 承诺解决时，angular 不知道范围已更改

尝试将作用域分配包装在 $timeout() 中，调用时将通过内部调用 $apply() 触发摘要循环

firebase.database.ref('users').child(uid).child("fullname")
  .once('value', function(snapshot) {
    var users = snapshot.val();
    $timeout(function() {
      $scope.fullname = users;
    });
  }, function(err) {
    console.log(err);

  });

也一定要注入$timeout

【讨论】：