javascript - 在 Controller 中使用 angularJS 从 firebase 对象获取值

Question

我正在尝试通过服务访问 Controller 中的用户数据。服务正确返回对象

{
  "$id": "9ecadf8e-a233-48ac-bebf-26b50ea2855d",
  "$priority": null,
  "branch": "London",
  "email": "manager@london.co.uk",
  "firstName": "John",
  "lastLogin": 1467975594697,
  "lastLoginPrevious": 1467975348837,
  "lastName": "Smith",
  "role": "Manager"
}

当从 Controller 访问数据时，我可以使用

成功访问 $id

$scope.userData = UserService.getUserData();
console.log($scope.userData.$id)

但是当尝试访问任何其他节点(例如 Angular 色)时

$scope.userData = UserService.getUserData();
console.log($scope.userData.role)

我只是在控制台中得到“未定义”。显然我没有正确执行此操作，而是坚持下一步应该尝试的内容。

这是我从 firebase 检索数据的服务

.service('UserService', ['$location', '$firebaseAuth','$firebaseObject', function ($location, $firebaseAuth, $firebaseObject) {
var userData = '';
var ref = new Firebase("https://firebase-url");
var authData = ref.getAuth();
var userUID = authData.uid;
var userRef = new Firebase("https://firebase-url/Users/" + userUID);
var userData1 = $firebaseObject(userRef);


return {

    getUserData: function () {
        if (userData == '') {
          userData =  userData1;
        }
        return userData;
    },

};

Answer 1

您可能遇到异步问题。以下是我在 Controller (Firebase 3.0) 中的代码示例:

// Gets reference to resources tree, SERVICE CALL
$scope.resourceNames = submissions.getResourceNames();
// Could be previously loaded, check
if(Object.keys($scope.resourceNames).length === 0 && $scope.resourceNames.constructor === Object) {
    // Get reference
    var resourceNameRef = firebase.database().ref("/resourceNames");
    firebase.database().goOnline();
    // Return JSON object of data at specified location
    $scope.resourceNames = $firebaseObject(resourceNameRef);
    // When resources loaded
    $scope.resourceNames.$loaded().then(function(data) {
        // Store into service, SERVICE CALL
        submissions.setResourceNames(data);
        // DO WHATEVER
    }).catch(function(error) {
        console.error("Error:", error);
    });
} else {
    // WAS ALREADY LOADED
}

我所做的是检查服务以查看数据是否已加载(由另一个 Controller )，如果没有，我调用数据，等待它加载，然后将其存储在我的服务中。

然后我可以在 Controller 内或 View 中随意使用数据:

<p>
    {{resourceNames.$id}}
</p>
<p>
    {{resourceNames.name}}
</p>
<!-- etc -->