Log out of Google+ API results in an error message stating: '$apply already in progress'

After successfully implementing the signIn functionality using Google+ API in my AngularJS web app, I encountered some issues with getting the signOut functionality to work properly.

Within one of my .html files (the Nav-bar), I have a function being called:

<a href="#" ng-click="logout()">SIGN OUT</a>

In the Nav-controller, I am calling the sign out function from the Google API:

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

Clicking on the sign out link results in an error message:

Error: [$rootScope:inprog] $apply already in progress
http://errors.angularjs.org/1.2.16/$rootScope/inprog?p0=%24apply
at angular.js:78
...

I'm unsure as to which "$apply" this error is referring to. Am I calling the signOut function correctly? Could it be related to the script placed in the index.html file?

<script>
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>

EDIT: Here is my Auth.js file, which serves as the authentication controller. The code has been adapted from HERE.

    $scope.processAuth = function (authResult) {
        // Check if authentication was successful.
        if (authResult['access_token']) {
            // Successful sign in.
            $scope.signedIn = true;

            //     ...
            // Do some work [1].
            //     ...
        } else if (authResult['error']) {
            // Error during sign in.
            $scope.signedIn = false;

            // Report error.
        }
    };

    // Process authentication when callback is received.
    $scope.signInCallback = function (authResult) {
        $scope.$apply(function () {
            $scope.processAuth(authResult);
        });
    };

Answer №1

Resolved the issue by enclosing the $apply script inside a setTimeout function within the signInCallback function in my Authentication controller.

  $scope.signInCallback = function (authResult) {
        setTimeout(function () {
            $scope.$apply(function () {
                $scope.processAuth(authResult);
            });
        }, 0);
    };

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

Dynamic Image Grid Created Using JavaScript Glitches

My dilemma involves using JQuery to create an HTML grid of images styled with Flex Boxes. The setup works perfectly on desktop, but when viewing it on mobile devices, the images begin to act strangely - jumping, overlapping, and even repeating themselves i ...

What is the best way to send an XML body using Angular 5 with POST method?

I am currently developing an Ionic application that needs to make REST API calls with XML as the body. However, I am facing issues in getting the call to post with XML. This is my LoginProvider where I utilize DOMParser to parse data to XML before sending ...

Guide on utilizing the carousel component in Bootstrap and populating it with data generated from Node.js

My goal is to design a carousel that displays 5 different pieces of information pulled from a separate app.js file. I attempted to implement a forEach loop, but encountered issues when trying to create a second Bootstrap carousel container. Here's th ...

The integration of Angular CLI with SCSS is no longer a separate process -

It seems like I might be overlooking something very straightforward here. After a fresh installation of angular-cli, I created a new website with SCSS. I input the SCSS in the global style.scss as well as some in a component SCSS file. However, when I se ...

Angular User Interface Framework Date Selector

I am encountering an issue with the datepicker from Angular UI bootstrap. When I programmatically change the date, the view does not update accordingly. For example, if I switch from November 30th to December 2nd, the date changes but the view remains fixe ...

Creating a dynamic HIIT program with an autoplay feature for videos and images, using a jQuery/JavaScript slider "playlist" with the backend support of

I am currently exploring the idea of developing a countdown timer that incorporates videos. In order for this timer to function effectively, it must be able to retrieve data such as countdown time, break time, number of sets, and video (or images if no vid ...

transforming array elements into properties of a React component

My text component contains the code below return ( <FormControl variant="outlined" className={classes.formControl}> <Grid container> <TextField id={props.id} label={props.label} d ...

Transfer information in the form of a JSON file using discord.js

I am attempting to send a JavaScript object (as JSON data in a JSON file) with a command using discord.js. However, it is proving to be more complicated than sending an image. I have tried using AttachmentBuilder (with or without JSON.stringify), both with ...

Tips on avoiding page refresh when hitting the submit button:

I am working on a form that consists of one input field and one submit button. <form method='POST' action='' enctype='multipart/form-data' id="form_search"> <input type='hidden' name="action" id="form_1" va ...

Issue with Passing 'key' Prop to React Component in a Mapped Iteration

https://i.sstatic.net/qeFKT.pngI'm struggling with adding a key prop to a React component in a mapped array within a Next.js project. The issue lies in a Slider component and an array of Image components being mapped. Even though I have provided a uni ...

"Trouble with making jQuery AJAX calls on Internet Explorer versions 8 and 9

I've been searching for the answer to this problem without any luck. I have a page with jquery ajax calls to an API service. It works well in Chrome, Safari, Firefox, and IE 10, but fails in IE 9 and 8. Here is the code: $.ajax({ ...

The reason for the lack of auto complete functionality in this specific Bootstrap example remains unclear

I've been attempting to implement an auto-complete dropdown feature with dynamic data, but I'm facing an issue where no suggestions are displayed in the dropdown. I found this example on Datalists: https://getbootstrap.com/docs/5.1/forms/form-con ...

Having trouble with the postcss-import grunt plugin?

Here is the layout of my project: my_project |-- css | -- main.css |-- css-dev | -- main.css |-- node_modules | -- bootstrap | -- dist | -- css | -- bootstrap.css |-- package.json `-- Gruntfile.js The contents of my Gr ...

What is the procedure for re-executing the request handler in a Node.js and Express application?

Currently, my setup involves node, express, and mongojs. Here is a code snippet that exemplifies my configuration: function mongoCallback(req, res) { "use strict"; return function (err, o) { if (err) { res.send(500, err.message); } else ...

conceal a targeted section from the bottom of the iframe

I have a website embedded inside an iframe for use in a webview application. <body> <iframe id="iframe" src="http://www.medicamall.com"></iframe> </body> This is the CSS code: body { margin:0; padding:0; height:10 ...

Is there a way to prompt the download or open dialog box for a PDF using Javascript?

Similar Question: How can I use jQuery to automatically force a PDF download? Hello everyone, I have a PDF document that users need to be able to download. Instead of using an <a> tag or something similar, I would like to achieve this using Jav ...

Enhancing user experience: Implementing specific actions when reconnecting with Socket.io after a disconnection

I am working on a game using node.js and socket.io. The code I have written is quite simple. The game starts animating as soon as it connects to the server and continues to do so. My main concern is ensuring that the game handles network and server disco ...

Import failures in Three.js could be attributed to potential issues with Webpack

Please note: I am utilizing create-react-app along with three.js v0.99.0. In my current project, I am faced with the challenge of importing specific modules from three.js to avoid bundling the entire library, which results in a large uncompressed file siz ...

Choose Status Menu DiscordJS version 14

Is there a way to get help with changing the bot's status if it's not working properly? The value of the variable "statuses" is set as status, but the status itself does not change. Using client.user.setStatus('dnd'); can sometimes work ...

Combining Tailwind with Color Schemes for Stylish Text and Text Shadow Effects

tl;dr I have a utility class in my tailwind.config.ts for customizing text shadows' dimensions and colors. However, when using Tailwind Merge, I face conflicts between text-shadow-{size/color} and text-{color}. The Issue In CSS, text shadows are oft ...