CODEWITHSUNDEEP
angularjsfirebasefirebase-authentication
zb22
zb22

Reputation: 3231

ng-show not working with Firebase auth response

I'm using Firebase with the web platform and I'm trying to authenticate a new user clicking on a button and show and a bootstrap alert (with ng-show) whenever the action succeeded or not.

Somehow the alert doesn't show up on the first click and it shown in the second click on the button.

I don't know if it has to do with the problem but Firebase making an http POST request whenever the action succeeded or not, maybe this action prevent from the ng-show to be shown. By the way I tried POST request with $http to some url and it does show the alert, so it has to do with Firebase probably.

For example this is the POST request when the action succeeded: XHR finished loading: POST "https://www.googleapis.com/identitytoolkit/v3/relyingparty/getAccountInfo?key=AIzaSyDq8jT_hORoFwefcApBXgiOAYQufpOvI9A".

It's very weird problem and I don't know what can I do to fix it. I thought that it's could be a bug on Angular and I tried to switch version of angular from 1.3 to 1.6 and nothing has changed.

here are some parts from my code if this can help somehow:

myApp.controller('secondController', ['$scope', function($scope){

$scope.register = function(){

    firebase.auth().createUserWithEmailAndPassword('[email protected]','123321').then( (user) => {

        console.log(user);
        $scope.alertShow = true;  // not shown on first click
        $scope.errorMessage = user.email;
        console.log($scope.errorMessage);

    }).catch(function(error) {
        console.log(error.message);
        $scope.alertShow = true;
        $scope.errorMessage = error.message;
        console.log($scope.errorMessage);
    })

}

}]);

The HTML: 

 <button class="btn btn-primary" ng-click="register()">Register</button>

    <div class="alert alert-danger" role="alert" ng-show="alertShow">
        {{ errorMessage }}
    </div>

Upvotes: 0

Views: 99

Answers (1)

Ved
Ved

Reputation: 12103

Try ng-if instead of ng-show. As ng-if dynamically add and remove dom elements, it will trigeer digest cycle.

  <button class="btn btn-primary" ng-click="register()">Register</button>

        <div class="alert alert-danger" role="alert" ng-if="alertShow">
            {{ errorMessage }}
        </div>

If even ng-if not works, try $apply to trigger $digest cycle.

myApp.controller('secondController', ['$scope','$timeout' function($scope,$timeout){

$scope.register = function(){
 firebase.auth().createUserWithEmailAndPassword('[email protected]','123321').then( (user) => {

        console.log(user);
        $scope.alertShow = true;  // not shown on first click
        $timeout(function (){$scope.$apply()},0);
        $scope.errorMessage = user.email;
        console.log($scope.errorMessage);

    }).catch(function(error) {
        console.log(error.message);
        $scope.alertShow = true;
         $timeout(function (){$scope.$apply()},0);
        $scope.errorMessage = error.message;
        console.log($scope.errorMessage);
    })

}

}]);

Upvotes: 1

Related Questions