2017-09-24 18 views
0

下面是我的角度JS的webapp的JS顯示:如何獲取HTML代碼中的火力點查詢只加載後

.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}}解決後才顯示?

回答

1

的問題是火力代碼的角度範圍內使角不知道的範圍之外時,火力承諾解決

嘗試包裹範圍分配在$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