2013-05-09 11 views
7

ログインしたユーザーをAngularJSスコープで記録しようとしていますが、ページが最初に読み込まれたときにエラーが発生します。

「ログイン」をクリックしても動作しているようですが、同じ「$ apply already in progress」エラーでログアウトします。

$applyの仕組みが誤解されていると思いますが、誰でも助けてくれますか?

更新

次のように私は$apply()にちょうどif (user)一部を包む場合、それはシームレスに動作します。

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

オリジナルコード

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> 

答えて

1

$applyは、角度のコンテキスト外(setTimeout、setInterval、または非角XHRコールバックなど)の場合にのみ必要です。

FireBaseAuthClientはAngularを念頭に置き、コントローラに注入されるツールなので、コールバックはすでに$scope.$applyにラップされている可能性があります。返信用

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

乾杯が、それは動作しません:あなたはこれだけ、$scope.$applyを削除することによって、あなたのコードを修正することができます。それは私が最初からやっていたことです。コールバックは私がそこに押し込むとコンソール出力を見ることができるので動作しますが、 '$ scope'は更新されません。これは、 "角張った"ものではないという症状です。なぜ、私が '$ apply()'を手始めに始めたのですか? –

+0

「ログイン」ロジックだけをラップし、上記のようにログアウトロジックを残しておくと機能します。更新についての私の元の質問を参照してください。 –

+0

言われているように、あなたは ''約束事 ''に$ applyを使う必要があります。ちょうどFYI。 –

関連する問題