What is causing the $firebaseSimpleLogin:logout event to trigger multiple alert() calls?

Can someone help me figure out why an alert() is being executed three times in this code snippet:

$scope.logout = function () {
    $rootScope.auth.$logout();
    $rootScope.$on('$firebaseSimpleLogin:logout', function(event) {
       alert("Logged out"); // This shows up 3 times.
    });
}

Yet, when I try a simpler approach, it only happens once:

$scope.logout = function () {
    $rootScope.auth.$logout();
    alert("Logged out"); // This ONLY appears once.
}

I understand that the second method is more direct; executing one line after the other. However, what if $logout fails and presents a successful operation message when it's actually not? That's why I'm using the $firebaseSimpleLogin:logout event to handle errors properly. Unfortunately, it's not working as expected.

Any ideas on what could be causing this issue?

javascriptangularjsfirebasefirebase-security

Answer №1

Without viewing the rest of the application, it's challenging to determine a solution. However, there is an issue present: in the initial code snippet, a new event listener is attached every time $scope.logout is invoked. For instance, if the function is called twice, the subsequent event trigger will result in two alerts. If clicked again, three alerts would appear upon the next event. To remedy this, it's advisable to place the registration of the event listener outside of the function call:

// Position this within a section that is only executed once

app.run(function($rootScope) {
  $rootScope.$on("$firebaseSimpleLogin:logout", ...);
});

// In another location

$scope.logout = function() {
  $rootScope.auth.$logout();
};

// Another approach is to remove the function when no longer needed

app.controller("AuthController", function($scope, $rootScope) {
  var unregListener = $rootScope.$on("$firebaseSimpleLogin:logout", ...);
  $scope.$on("$destroy", unregListener);

  $scope.logout = function() { ... };
});

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

Easily upload files using Multer without the need for specifying action, method, or encrypt="multipart/form-data" attributes in the form tag

I'm currently facing an issue while trying to upload an image using Multer and Angular's $http.post method. Instead of triggering the form submission with a submit button, I want to directly use $http.post. However, I am encountering a problem wh ...

angularjsnode.jsexpressfile-uploadmulter

Establishing Routing for Angular within an ASP.NET Web API 2 application

Currently, I am facing difficulties in setting up the routing for my project. There are several cases that need to be handled, but I am struggling to make them work as intended. case 1: / - Should route to the index of the angular app Case 2: /{angular ...

javascriptc#asp.netangularjsasp.net-web-api

Can user-generated code execute Javascript Promises in its entirety?

Can one fully implement the JavaScript Promise class using only userspace code, without relying on any support from native code (such as the internals of JavaScript) that would typically only be accessible to those working on a JavaScript engine like the V ...

javascriptes6-promiseuserspace

Utilize HTML, AJAX, and JavaScript to retrieve the location of the current user and display markers for other users on a

I am attempting to display on a single map the current location of a user and markers for other users, whose locations are obtained through an ajax post. In essence, I am looking to merge the concepts from: Google Maps Geolocation Example with: Multiple ...

javascriptphpajaxgoogle-mapsgoogle-maps-markers

I'm experiencing a problem with my React application where errors are not being shown in the browser. Instead

https://i.sstatic.net/FTMz7.png Why is React only displaying an empty screen instead of showing errors like on my instructor's system? https://i.sstatic.net/QCbgG.png How can I resolve this issue? EDIT: While I can see the error in the console and ...

javascriptreactjs

When the jQuery Div is moved to the right, it gradually shrinks in size, yet remains unchanged when

I have been making updates to this page, which you can view here. When you select "Let's Get Started" and then proceed with the right arrows, the divs smoothly move to the left without shrinking. However, when clicking on the back or left arrows, the ...

javascriptjqueryhtmlcss

The async-await status is resolved, however the ajax request is still pending

Currently, I am attempting to handle a getJson call and process the data received. Despite trying various solutions such as using $.ajax's async: false (which did not work due to the query being cross domain), callbacks, and the .done portion of a bas ...

javascriptajaxpromiseasync-await

What are the steps to incorporate a Microsoft Project Dashboard into a web application?

Currently, I am working on a project that involves incorporating an MS Project Dashboard into my Angular-based web application with a Node backend API. Our goal is to seamlessly embed the MS Project dashboard within our application. However, I am unsure of ...

node.jsangularjspowerbimicrosoft-graph-apims-project

Button to access overlay menu on my map with OpenLayers 3

I am trying to add a menu button on top of my map that, when clicked, will display a window. I have created the map div and the overlayMenu button div, but unfortunately, the button is not showing up where I want it to. I would like the button to be locate ...

javascriptjqueryhtmlcss

Instantly reveal menu by pressing button

Is there a way to make my mobile menu open immediately upon touching the button? I have used ontouchstart="" in both buttons to create an overlay on the content when the offcanvas menu is visible. This functions well as soon as the user touches either butt ...

javascripthtmlmobiletouchstart

Unable to display information in jvectormap using json format

For the past 48 hours, I've been struggling to find a solution to a persistent issue I'm facing. The problem arises when I try to integrate data from an MSSQL database into a map using the jvectormap plugin for Turkey. Despite dynamically assigni ...

javascriptjqueryjsonajaxasp.net-mvc

What causes certain event handlers to be activated when using dispatchEvent, while others remain inactive?

When it comes to event-based JS, there are two main APIs to consider: event listeners and event handlers. Event listeners can be registered using addEventListener, while event handlers are typically registered with an API similar to target.onfoobar = (ev) ...

javascripteventsbrowserdom-events

Connecting event listeners to offspring elements, the main element, and the entire document

My request is as follows: I have multiple boxes displayed on a webpage, each containing clickable divs and text. When a user clicks on a clickable div, an alert should appear confirming the click. Clicking on the text itself should not trigger any action. ...

javascripthtmljquerycssjquery-events

What's the reason behind the console showing an uncaught promise error message?

When attempting to delete some lists from my backend using a fetch request, I encountered an issue. The console is displaying an error message that reads "Uncaught (in promise)." What could be causing this problem? Here is the frontend code snippet for th ...

javascriptnode.jsreactjsexpress

Expiration Date of Third-Party Cookies

I need help retrieving the expiration date of a third-party cookie programmatically using JavaScript. Even though I can see the expiry time in the browser's DevTools (refer to the screenshot at https://i.sstatic.net/BW072.png), I am struggling to figu ...

javascriptnext.jscookiesnext.js13third-party-cookies

Is it not possible to change node labels in D3.js after clicking on a node?

After being inspired by this link, I successfully created a basic network visualization app using D3.js. The app reads node names from a textarea on an HTML page and then constructs a network where all nodes are interconnected. All the relevant code can ...

javascripthtmlcssd3.js

Removing information from firebase using a distinct identifier for targeting

My goal is to implement a delete functionality on my website by adding delete buttons next to each data entry displayed in the "#table_body". These buttons are dynamically created using JavaScript. The challenge I'm facing is how to remove the data ba ...

javascripthtmlfirebasefirebase-realtime-database

Exploring APIs through Angular components: How to effectively test them

I have recently delved into the world of testing angular projects. While basic unit testing seems to be going smoothly for me, I am encountering difficulties with dependency testing, especially when API services are injected into the component and there is ...

javascriptangularunit-testingjasminekarma-jasmine

Does type conversion have a specific ranking of preference?

When working with JavaScript, it's important to note that the language automatically converts types when necessary. For instance, if you have an expression like "8" * "3", JavaScript will convert the strings to numbers and calculate the result as 24. ...

javascript

Authorization setup encountered an issue: an unexpected character was found at the beginning of the JSON data on line 1, column

I'm currently in the process of setting up a login page for users on my website, using mongoose, express, bcrypt, and nodejs. However, I am encountering an issue when trying to input the username and password. The error message that I receive is as fo ...

javascriptnode.jsjsonmongoose