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

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;
        }
    });

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

Facebook username not displaying in Angularjs app (using Firebase)

angularjs

firebase