2017-09-24 19 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