AngularJS显示了Firebase的承诺

Question

我确信这是一个简单的问题，但由于我在角度工作了2周，现在我似乎无法弄明白。

我在facebook登录时使用了firebase功能：

function FBLogin(){
     var provider = new firebase.auth.FacebookAuthProvider();
     firebase.auth().signInWithPopup(provider).then(function(result) {
      // This gives you a Facebook Access Token. You can use it to access 
      the Facebook API.
      var token = result.credential.accessToken;
      // The signed-in user info.
      var user = result.user;
      console.log(user.displayName);
      $scope.user = user.displayName;
      $scope.loggedIn = true;
      // ...
    }).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
      // The email of the user's account used.
      var email = error.email;
      // The firebase.auth.AuthCredential type that was used.
      var credential = error.credential;
      console.log(error);
      // ...
    });
 }

$ scope.user应该在返回承诺时显示HTML中的用户名吗？它没有这样做。

HTML：

调用该功能的按钮：

<a ui-sref=".dashboard" class="btn btn-primary">
        <img class="logo-image" src='components/images/login-button-png-
18039.png' width="140" height="50" ng-click="vm.FBLogin()" ng-
if="!loggedIn">
    </a>

应显示数据的字段：

<p ng-if="loggedIn">{{ user }} xxx</p>

用户名显示在控制台中，但不显示在HTML中。

Answer 1

Firebase承诺不是AngularJS承诺

firebase API返回的Promise未与AngularJS框架集成。

使用$q.when从firebase承诺创建AngularJS承诺：

function FBLogin(){
     var provider = new firebase.auth.FacebookAuthProvider();
     //USE $q.when
     $q.when(firebase.auth().signInWithPopup(provider))
       .then(function(result) {
          // This gives you a Facebook Access Token.
          // You can use it to access the Facebook API.
          var token = result.credential.accessToken;
          // The signed-in user info.
          var user = result.user;
          console.log(user.displayName);
          $scope.user = user.displayName;
          $scope.loggedIn = true;
          // ...

    }).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
      // The email of the user's account used.
      var email = error.email;
      // The firebase.auth.AuthCredential type that was used.
      var credential = error.credential;
      console.log(error);
      // ...
    });
 }

AngularJS通过提供自己的事件处理循环来修改正常的JavaScript流程。这将JavaScript拆分为经典和AngularJS执行上下文。只有在AngularJS执行上下文中应用的操作才能受益于AngularJS数据绑定，异常处理，属性监视等。

需要将firebase promise转换为AngularJS承诺，以将事件带入AngularJS执行上下文。

  

$ q.when（值）

     

将可能是值的对象或（第三方）包装成$ q承诺。当您处理可能会或可能不是承诺的对象，或者承诺来自不可信任的源时，这非常有用。

     

-- AngularJS $q Service API Reference - $q.when