Geek Answers Handbook

"Error: $ apply is already running" when using FireBaseAuthClient using AngularJS

I am trying to record a registered user in the AngularJS area, but I get an error message the first time the page loads.

Pressing "Sign In" seems to work, but then fail with the same error "$ apply already in progress".

I expect that I just did not understand how $apply works, can anyone help?

Update

It works without problems if I wrap only the if (user) part in $apply() as follows.

 var auth = new FirebaseAuthClient(ref, function(error, user) { if (user) { $scope.$apply(function(){ $scope.user = user; }); console.log(user); } else if (error) { // I can't vouch for this, haven't tested it $scope.$apply(function(){ $scope.user = null; }); console.log(error); } else { $scope.user = null; console.log("logged out"); } });

Source Code :

app.js:

 var app = angular.module('app', ['firebase']);

controller.js:

 app.controller('Login', ['$scope', 'angularFire', function($scope, angularFire) { $scope.loginstatus = 'logged out'; var ref = new Firebase("https://app.firebaseio.com/"); var auth = new FirebaseAuthClient(ref, function(error, user) { if (user) { $scope.$apply(function(){ $scope.loginstatus = 'logged in'; }); } else if (error) { $scope.$apply(function(){ $scope.loginstatus = 'error'; }); alert("Login error: " + error); } else { $scope.$apply(function(){ $scope.loginstatus = 'logged out'; }); } }); $scope.login = function(provider, args) { auth.login(provider, args); } $scope.logout = function() { auth.logout(); } }]);

index.html

 <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="utf-8"> <title>App</title> <script type="text/javascript" src="https://cdn.firebase.com/v0/firebase.js"> <script type="text/javascript" src='https://cdn.firebase.com/v0/firebase-auth-client.js'></script></script> <script type="text/javascript" src="lib/angular/angular.js"></script> <script type="text/javascript" src="lib/angularFire.js"></script> <script type="text/javascript" src="js/app.js"></script> <script type="text/javascript" src="js/controllers.js"></script> </head> <body ng-controller="Login"> <p>Login status: {{loginstatus}}</p> <div class="container"> <h1>Login</h1> <p> <button ng-hide="user" ng-click="login('twitter')" class="btn btn-primary btn-large">Login</button> <button ng-show="user" ng-click="logout()" class="btn btn-primary btn-large">Logout</button> </p> </div> </body> </html>
+7
source share
1 answer

$apply is only required if you are outside the context of Angular (for example, the callback setTimeout, setInterval, or not Angular XHR).

Since FireBaseAuthClient is a tool written with Angular and injected into your controller, it is likely that callbacks are already wrapped in $scope.$apply . You can fix your code by removing $scope.$apply , so just:

 var ref = new Firebase("https://app.firebaseio.com/"); var auth = new FirebaseAuthClient(ref, function(error, user) { if (user) { $scope.loginstatus = 'logged in'; } else if (error) { $scope.loginstatus = 'error'; alert("Login error: " + error); } else { $scope.loginstatus = 'logged out'; } });
+1
source

More articles:


All Articles