CODEWITHSUNDEEP
javascriptangularjsfirebaseweb-applicationsfirebase-realtime-database
Deji James
Deji James

Reputation: 437

Angular values do not reflect in scope until view changes

Below is my HTML code :

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

Below is the javascript code for the html code:

'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);
});
};

MY Issue

My issue is that the {{username}} and {{total}} values, which are results of the firebase query do not show in the view once the page loads. However, the values show up once I leave the page and then return to the view. Does this mean that the HTML code loads faster than the firebase query can be resolved? If so, is there a way to make the page only load AFTER the firebase query is resolved?

Upvotes: 1

Views: 36

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222522

you'll need to let angular know to run an update.

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

Upvotes: 1

Related Questions