Question

我正在尝试学习Angular和Firebase，但是当我尝试显示从Facebook返回的用户名，个人资料照片等时，我遇到了问题。我可以将从FB返回的对象记录到控制台，看到它确实返回了所有相应的信息，但是如果我尝试在我的视图中显示任何信息它不起作用，所以不确定我缺少哪一步。我已经包含了所有必要的脚本，所以我不认为这是问题任何建议都非常感谢。如果我遗漏了可能有助于找到解决方案的任何信息，请告诉我。

我的控制器：

'use strict';

angular.module('myApp.login', ['ngRoute', 'firebase'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/login', {
    templateUrl: 'login/login.html',
    controller: 'LoginCtrl'
  });
}])

.controller('LoginCtrl', function ($scope, $firebaseAuth, $firebaseObject) {
    var ref = new Firebase("https://shining-heat-2026.firebaseio.com");
    $scope.login = function () {
        ref.authWithOAuthPopup("facebook", function (error, authData) {
            if (error) {
                console.log("Login Failed!", error);
            } else {
                var myname = authData.facebook.displayName;
                var userName;
                console.log("hi" + " " + myname);
                console.log(authData);
            }
        });
        $scope.userName = authData.facebook.displayName;
    }
});

并查看：

<div class="row myrow" ng-controller="LoginCtrl">
  <div class="col-lg-4">
    <button id="fblogin" type="button" ng-click="login()">FB Login</button>
  </div>
  <div class="col-lg-4">{{"Hi" + " " + userName}}</div>
  <div class="col-lg-4">Right Login</div>
</div>

我已经包含了所有必要的脚本并在我的index.html文件中引导了应用程序，所以我不会这是一个问题。此外，如果我将$ scope.username设置为一个字符串，一旦我触发登录功能，它将显示在我的视图中。

Answer 1

我同意，编程的方式意味着将代码行放在随机位置直到它开始工作提供了很多乐趣......但是，要停止这个游戏，你需要知道正确的组合。

ref.authWithOAuthPopup是一个异步操作，当它完成时，它会调用提供的处理程序。因此authData仅存在于此函数的范围内

    ref.authWithOAuthPopup("facebook", function (error, authData) {
        if (error) {
            console.log("Login Failed!", error);
        } else {
            var myname = authData.facebook.displayName;
            var userName;
            console.log("hi" + " " + myname);
            console.log(authData);
            $scope.userName = authData.facebook.displayName;
        }
    });

Facebook用户名未在Angularjs应用中显示（使用Firebase）

1 个答案: