AngularJS 显示来自 Firebase 的承诺 [英] AngularJS display a promise from Firebase

问题描述

我确定这是一个简单的问题，但由于我在 angular 工作了大约 2 周，我似乎无法弄清楚.

I am sure it is a simple problem, but since I work in angular for like 2 weeks now I can't seem to figure it out.

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

I have this facebook login with firebase function:

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 中显示用户名，对吗?它不会那样做.

$scope.user should show me the username in the HTML when the promise is returned right? It doesn't do that.

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

The username is shown in the console, but not in HTML.

推荐答案

Firebase 承诺不是 AngularJS 承诺

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

Firebase promises are not AngularJS promises

Promises returned by the firebase API are not integrated with the AngularJS framework.

使用 $q.when 创建 AngularJS 承诺来自 Firebase 承诺:

Use $q.when to create an AngularJS promise from a firebase promise:

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 数据绑定、异常处理、属性监视等.

AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.

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

The firebase promise needs to be converted to an AngularJS promise to bring the event into the AngularJS execution context.

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

$q.when(value)

Wraps an object that might be a value or a (3rd party) then-able promise into a $q promise. This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.

--AngularJS $q 服务 API 参考 - $q.when

这篇关于AngularJS 显示来自 Firebase 的承诺的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！