Angular.js page failing to reflect changes following Firebase request completion

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

When I submit my registration details, the register function is triggered. However, the issue arises where the event exits the

firebase.auth().createUserWithEmailAndPassword
before receiving a response, resulting in the {{message}} value remaining blank on the HTML page. This happens because the event returns to the page before the process completes. I would like the event to wait until a response is received from
firebase.auth().createUserWithEmailAndPassword($scope.user.email,$scope.user.password)
.

Please note that I am working with Firebase version 3.x.x.

Answer №1

firebase.auth().createUserWithEmailAndPassword
is an asynchronous function that is not integrated with Angular.js. As a result, Angular.js will not recognize any changes made by its callback to $scope, and the page will not be updated. To resolve this, make sure to include $scope.apply() after the callback finishes.

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

Here are some other recommendations:

  • Check out the AngularFire project, which manages triggering Angular.js after Firebase operations.
  • The approach of using standalone controllers and $scope in Angular.js is outdated. Consider exploring Controller-As syntax (Angular.js 1.3+) or components (Angular.js 1.5+).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging the power of React Native with embedded RapidAPI functionality in the source

I had previously used the following code to retrieve a JSON file containing personal data in my React Native source code: async componentDidMount() { try { const response = await fetch('mydomain.org/personaldata.json'); const responseJson ...

Initialization of an empty array in Typescript

My promises array is structured as follows: export type PromisesArray = [ Promise<IApplicant> | null, Promise<ICampaign | ICampaignLight> | null, Promise<IApplication[]> | null, Promise<IComment[]> | null, Promise<{ st ...

The blur() function in -webkit-filter does not seem to function properly in Vue.js

I'm having trouble implementing the -webkit-filter: blur() property. I tried using "filter" instead, but it still isn't working. Could this be a limitation of Vue.js or are there any other solutions available? <template> <div class=&qu ...

Here is a way to retrieve the name of a ref object stored in an array using Vue.js 3 and Typescript

I have a Form, with various fields that I want to get the value of using v-model and assign them to ref objects. In order to populate my FormData object with this data, I require both the name and the value of the ref objects. Unfortunately, I am struggli ...

What causes data to update in a Vue template but not in the JavaScript portion of the code?

The topic in the template section updates when its value in the parent component changes, however, the same value in the script part remains the initial value it received at search_params.set('param1', this.topic);. Everything else in the code is ...

Issue with JavaScript function not triggering in Internet Explorer

Here is the code snippet I am working with: <body onLoad="subcatSelection();"> The function that should run on body load is located in a .js file that is included using this code: <script type="text/javascript" src="bincgi/search_lists.js"& ...

Transforming user-entered date/time information across timezones into a UTC timezone using Moment JS

When working on my Node.js application, I encounter a scenario where a user inputs a date, time, and timezone separately. To ensure the date is saved without any offset adjustments (making it timezone-independent), I am utilizing Moment Timezone library. ...

Duplicating an Angular 2 reactive form without retaining the original reference

I am facing a challenge with my reactive form where I need to round certain values when the form is submitted, without altering their appearance on the page. To achieve this, I devised a method that generates a new form, rounds the specified values, and t ...

The event OT.Publisher.onStreamAvailableError is triggered when the media stream is unexpectedly aborted,

Currently, I am experimenting with Opentok using Node.js. My goal is to enable one-to-one video chats between users utilizing Tokbox's services. Surprisingly, the functionality works flawlessly in Chrome but encounters issues in Firefox. An error mes ...

Utilizing Javascript for logging into Facebook

Feeling frustrated! I've been struggling to implement the Facebook Login pop-up on my website using the Facebook JavaScript API. Despite following tutorials, I can't seem to make the login pop-up appear. Instead, when I go through the login pro ...

Navigating through props provided within a setup function in Vuejs using the Composition API

I am facing an issue when trying to pass an object into a child component using props in the Composition API setup function of Vue. Instead of utilizing 'Abe', I want to run a query from firebase based on the displayName property of the user. As ...

Collect data from a third-party website that necessitates the activation of JavaScript

Given that phantomjs has been abandoned, I am exploring alternative methods. For instance, using chrome-webdriver may not be ideal as it cannot operate on a remote host like heroku. Is there a way to scrape a website that relies on JavaScript being activa ...

What is the best way to connect a line from the edge of the circle's outermost arc?

I am attempting to create a label line that extends from the outermost point of the circle, similar to what is shown in this image. var svg = d3.select("body") .append("svg") .append("g") svg.append("g") .attr("class", "slices"); svg.append("g") ...

What is the best way to make an HTML form show fields depending on certain conditions?

Initially, I created an index page containing a form with various fields. The utility was built to handle all the fields, but now there's been a change in requirements. What I need is for only the Controller Type and Test Type fields to be displayed f ...

The "begin" parameter of the Angular limitTo filter appears to be ineffective in Angular version 1.3

Currently, I am attempting to implement a pagination feature on an array of users using Angularjs 1.3. ng-repeat="user in users | filter: searchText | orderBy: 'lastName' | limitTo:pageSize:startPosition track by user.lanId" I specifically want ...

Strategies for distinguishing between when a user closes a browser tab or refreshes the page

I'm currently in the process of developing a multiplayer game app using vue.js. For state management, I've opted to utilize vuex and for the backend server, I have integrated Firestore. A crucial aspect of the app is handling user interactions w ...

When using Selenium WebDriver, the WebElement .findElement method can sometimes cause errors in JavaScript

Successfully locating the element, I am able to retrieve the text within the container. However, when attempting to fetch the titles of products by iterating through the array of WebElements inside the container, the .findElement() consistently throws an e ...

Firebase authentication encountered an error due to a network request failure

Utilizing firebase Hosting to host my website, I am encountering a persistent error when attempting to login using email/password. This is the JavaScript code that I am using: window.onload = () => initApp(); //Initialize screen function initApp(){ ...

Coming back from retrieving data from an API

I'm having trouble with a function that performs a POST request to retrieve access tokens from an API. Although the function successfully prints the token to the console, I haven't been able to figure out how to properly parse and save the access ...

Neglecting to send a socket signal while assigning a variable to a socket message

In my client-side script, I am using the following snippet: socket.on('bla', function(data) { if (data == ID) { console.log('I don't understand what's happening here.'); } }) socket.on(ID, function(data) { ...