AngularJS展示了Firebase的承诺 [英] AngularJS display a promise from Firebase

问题描述

我确信这是一个简单的问题，但是由于我在棱角工作了大约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>

应在其中显示数据的字段:

The field where the data should be displayed:

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

用户名显示在控制台中，而不显示在HTML中.

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

推荐答案

Firebase承诺不是AngularJS承诺

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

Firebase promises are not AngularJS promises

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

使用 $ q.when 创建AngularJS承诺从火力基地承诺:

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.

$ q.when(value)

将可能是值或(第三方)然后可承诺的对象包装为$ 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屋！