2013-05-09 10 views
7

Sto provando a registrare l'utente connesso in un ambito AngularJS, ma ricevendo un errore quando la pagina viene caricata per la prima volta.

Fare clic su "Accesso" sembra funzionare, ma poi le barre di disconnessione con lo stesso errore "$ applica già in corso".

Mi aspetto che abbia appena frainteso come funziona $apply, qualcuno può aiutarti?

Aggiornamento:

Funziona perfettamente se mi avvolgo solo la parte if (user) in $apply() come segue.

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

Codice originale:

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> 

risposta

1

$apply è necessario solo quando si è fuori dal contesto di Angular (come un setTimeout, setInterval o callback XHR non angolare).

Poiché FireBaseAuthClient è uno strumento scritto con in mente Angular e inserito nel controller, è probabile che i callback siano già stati inseriti in $scope.$apply. Puoi correggere il tuo codice rimuovendo $scope.$apply, quindi:

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'; 
    } 
}); 
+0

Cheers per la risposta ma che non funziona. Questo è quello che dovevo iniziare. Il callback funziona perché posso vedere l'output della console se lo sposto, ma '$ scope' non viene aggiornato. Questo è sintomatico di non essere "dentro angolare", quindi perché ho iniziato a giocherellare con '$ apply()'. –

+0

Funziona se avvolgo solo la logica "loggato" e lascia la logica di disconnessione come sopra. Vedi la mia domanda originale per un aggiornamento. –

+0

Detto questo, potrebbe essere necessario usare $ apply in un '' promise''. Solo una FYI. –

Problemi correlati