CODEWITHSUNDEEP
javascriptangularjsfirebasefirebase-authentication
Aman
Aman

Reputation: 246

Angular.js page not updated after Firebase response

myApp.controller('RegistrationController', ['$scope',
  function($scope) {
    var auth = firebase.database().ref();
    //  console.log("auth::"+auth);

    $scope.login = function() {
      $scope.message = "Welcome " + $scope.user.email;
    }; //login


    $scope.register = function() {    
      console.log($scope.user.email);
      console.log($scope.user.password);
      console.log("jdxnx::" + auth);
      firebase.auth().createUserWithEmailAndPassword($scope.user.email, $scope.user.password).then(function() {
        $scope.message = "Hi" + $scope.user.email + " you have registered"
      }).catch(function(error) {
        $scope.message = error.message;
        console.log($scope.message);
      }); // //createUser
    }; // register
  }
]); // Controller

In the above code as i click submit my register function runs and then inside that firebase.auth().createUserWithEmailAndPassword runs but before i get response from firebase.auth().createUserWithEmailAndPassword($scope.user.email,$scope.user.password) function my event comes out of it then from the register function and returns to page due to which {{message}} value remains blank in the html page , though in back end firebase.auth().createUserWithEmailAndPassword($scope.user.email,$scope.user.password) function processes and get the response but the event return to the page before process completes. I want that function event should wait till i get response.

Note that I am using firebase 3.x.x .

Upvotes: 0

Views: 95

Answers (1)

Hugo Wood
Hugo Wood

Reputation: 2260

firebase.auth().createUserWithEmailAndPassword is an asynchronous function that is not part of Angular.js. Therefore, Angular.js cannot be aware of modifications made by its callback to $scope, and it will not update the page. Try to add $scope.apply() after the callback is done.

firebase.auth().createUserWithEmailAndPassword($scope.user.email, $scope.user.password).then(function() {
    $scope.message = "Hi" + $scope.user.email + " you have registered"
    $scope.apply();
  }).catch(function(error) {
    $scope.message = error.message;
    console.log($scope.message);
    $scope.apply();
  });

Other stuff you might be interested in:

  • Have a look at the AngularFire project, it will take care of triggering Angular.js after Firebase operations.
  • The way you use Angular.js, with standalone controllers and $scope, is not recommended, and has not been for quite a while. You may want to have a look at the Controller-As syntax (Angular.js 1.3+) or better, components (Angular.js 1.5+).

Upvotes: 2

Related Questions