Question

以下是我的HTML代码：

     <div class="container-fluid">
        <div class="jumbotron" id="welcomehead">

            <br><br><br><br><br><br><br><br><br><br>
        </div>
        <div class="row">
            <div class="col-md-12">
                <h2>Welcome {{username }}, your Season total is {{total }}</h2>  

            </div>  
        </div>
        <div class="row">
            <div class="col-md-12">
                <h3 id="slogan" >5 teams; 1 Goal</h3><br>
                <img src="http://res.cloudinary.com/deji/image/upload/v1508887997/ymkit_ww8np1.jpg">
                <img src="http://res.cloudinary.com/deji/image/upload/v1508888352/indkit_zop1gx.jpg">
                <img src="http://res.cloudinary.com/deji/image/upload/v1508887290/chad2kit_fa3lrh.jpg">
                <img src="http://res.cloudinary.com/deji/image/upload/v1508887718/fbg2kit_lzndap.jpg">
                <img src="http://res.cloudinary.com/deji/image/upload/v1508888206/vgc_kit_hvpdz4.jpg">
            </div>
        </div>

以下是html代码的javascript代码：

'use strict';

angular.module('TNF.welcome', ['ngRoute', 'firebase'])

.config(['$routeProvider', function($routeProvider) {
 $routeProvider.when('/welcome',{
    templateUrl:'welcome/welcome.html',
    controller: 'WelcomeCtrl'
 });
}])

.controller('WelcomeCtrl',['$scope','$firebaseAuth','CommonProp','$location','DatabaseService',
     function($scope,$firebaseAuth, CommonProp,$location, databaseService){


firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    databaseService.users.child(user.uid).once('value', function(usersSnapshot){
    var users = usersSnapshot.val();
    var total = users.total;
   $scope.username = user.email; 
   $scope.total = total;

  }, function(err) {
       console.log(err);
        $scope.total = 0;
    });
  } else {
    // No user is signed in.
    $location.path('/home');
  }
});





$scope.logout = function(){
  firebase.auth().signOut().then(function() {
  console.log('Signed Out');
  $location.path('/home');
}, function(error) {
  console.error('Sign Out Error', error);
});
};

我的问题

我的问题是，一旦页面加载，{{username}}和{{total}}值是firebase查询的结果，就不会在视图中显示。但是，一旦我离开页面然后返回到视图，值就会显示出来。这是否意味着HTML代码的加载速度比firebase查询的解析速度快？如果是这样，有没有办法让页面只在firebase查询解析后加载？

Answer 1

你需要让angular知道运行更新。

$scope.username = user.email; 
$scope.total = total;
$scope.$apply();

在视图更改之前，角度值不会反映在范围内

1 个答案: