Question

我正在关注Lynda.com使用angularjs构建一个数据驱动的应用程序。

authentication.js已为$rootScope.currentUser分配了Firebase用户的值，而index.html则应显示{{currentUser.firstname}}。用户已登录，Firebase中的值正确，但页面上未显示任何内容。

authentication.js
myApp.factory('Authentication', function($firebase,
  $firebaseAuth, $routeParams, $rootScope, $location, FIREBASE_URL) {

  var ref = new Firebase(FIREBASE_URL);
  var auth = $firebaseAuth(ref);

  auth.$onAuth(function(authUser){
    if(authUser) {
        var user = new Firebase(FIREBASE_URL + '/users/' + authUser.uid);
        $rootScope.currentUser = user;

        console.log("logged in as:", authUser.uid);
        //console.log($scope.currentUser);
    }else{
        console.log("logged out");
        $rootScope.currentUser = '';
    }
  });

  //Temporary object
  var myObject = {

    login: function(user) {
      return auth.$authWithPassword({
        email: user.email,
        password: user.password
      }); //authWithPassword
    }, //login

    register: function(user) {
      return auth.$createUser({
        email: user.email,
        password: user.password
      }).then(function(regUser) {
        var ref = new Firebase(FIREBASE_URL+'users');
        var firebaseUsers = $firebase(ref);

        var userInfo = {
          date : Firebase.ServerValue.TIMESTAMP,
          regUser : regUser.uid,
          firstname: user.firstname,
          lastname : user.lastname,
          email: user.email
        }; //user info

        firebaseUsers.child(regUser.uid).set(userInfo);
      }); //promise
    } //register

  }; //myObject
  return myObject;
}); //myApp Factory

index.html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>Angular Data</title>
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/lib/angular/angular.min.js"></script>
  <script src="js/lib/angular/angular-animate.min.js"></script>
  <script src="js/lib/angular/angular-route.min.js"></script>

  <script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>

  <script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>

  <script src="js/app.js"></script>
  <script src="js/controllers/meetings.js"></script>
  <script src="js/controllers/registration.js"></script>
  <script src="js/services/authentication.js"></script>
</head>
<body>
    <header>
        <nav class="cf" ng-include="'views/nav.html'">

        </nav>
    </header>
<div class="page">
    <div class="userinfo" ng-show="currentUser">
    <span class="userinfo">Hi {{ currentUser.firstname }}</span>
 </div>   
  <main class="cf" ng-view>

  </main>
</div>
</body>
</html>

感谢您的帮助。编辑。

@Scott Selby。感谢您的建议，但我仍然没有在视图中获得名字。制作$rootScope.currentUser = authUser我可以console.log($rootScope.currentUser);为：

Object {provider: "password", uid: "simplelogin:11", token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2IjowLCJkI…wNDZ9.6eMzLZAVhOFuU8U-gl4MlsoUSrbs5FvlzGqFu-Go4S4", password: Object, auth: Object…}

尽管Firebase有用户/

simplelogin:11
 date: 
 email: 
 firstname: 
 lastname: 
 regUser:

我只能从authUser访问uid，因此只能访问currentUser。所以我可以将currentUser.uid传递给视图但不传递currentUser.firstname

Answer 1

哦，小男孩！我是否患有脑部融化！我错过了$ firebaseObject，如下所示：

if(authUser) {

        var ref = new Firebase(FIREBASE_URL + '/users/' + authUser.uid);
      var user = $firebaseObject(ref);
        $rootScope.currentUser = user;

    }else{

        $rootScope.currentUser = '';
    }

刚接触Firebase并发现他们最近用重命名的$ firebaseObject服务替换了$ asObject（）。我删除了$ asObject而没有替换$ firebaseObject。所以现在它有效，我很高兴。

$ rootScope无效 - 值未显示在视图中

1 个答案: