【问题标题】：AngularJS display a promise from FirebaseAngularJS 显示来自 Firebase 的承诺
【发布时间】：2017-05-02 09:07:41
【问题描述】：

我确信这是一个简单的问题，但由于我在 Angular 中工作了大约 2 周，现在我似乎无法弄清楚。

我有这个带有 firebase 功能的 facebook 登录：

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 中。

【问题讨论】：

firebase 是 Angular 服务吗？如果不是，则需要使用 $scope.apply() 通知 Angular 范围更改。
好吧，我以为很简单，谢谢 :D

标签： angularjs firebase angular-promise

【解决方案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 承诺需要转换为 AngularJS 承诺以将事件带入 AngularJS 执行上下文。

$q.when(值)

将一个可能是值或（第 3 方）then-able 承诺的对象包装到 $q 承诺中。当您处理的对象可能是也可能不是 Promise 时，或者当 Promise 来自不可信的来源时，这很有用。

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

【讨论】：