Angularjs Firebase获取数据列表

时间:2016-09-29 16:11:47

标签: javascript angularjs firebase firebase-realtime-database angularfire

我正在尝试从Firebase获取数据。我的做法是更好地学习Firebase,我的应用程序就像是一个消息应用程序。

我的问题是,我试图获取这些消息数据,但由于它们具有唯一的ID,我无法联系到它们。如何联系messagecontentsdates

这是我的数据库结构:

angularish
    -> <id>
        -> "sender" : "john"
        -> "to" : "sarah"
        -> "date" : "16/09/2016"
        -> "messageContent" : "Something like a long text..."
    -> <id>
        -> "sender" : "john"
        -> "to" : "sarah"
        -> "date" : "16/09/2016"
        -> "messageContent" : "Something like a long text..."
    -> <id>
        -> "sender" : "john"
        -> "to" : "sarah"
        -> "date" : "16/09/2016"
        -> "messageContent" : "Something like a long text..."

这是我的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test3 Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.4.1/firebase.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.4.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.4.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.4.0/firebase-database.js"></script>
    <!-- Leave out Storage -->
    <!-- <script src="https://www.gstatic.com/firebasejs/3.4.0/firebase-storage.js"></script> -->
    <script>
      // Initialize Firebase
      firebase.initializeApp(config);
    </script>
    <script>
        var app2 = angular.module("theapp",[]);
        app2.controller("generalController",function($scope){

          var database = firebase.database();
          var rootRef = database.ref();
          var subRootRef = rootRef.child("angularish");
          $scope.messages = [];

          rootRef.push({
                "sender":"y",
                "to" : "x",
                "messageContent" : "Something like a long text",
                "date" : "10/06/2016"
          });

          rootRef.on("value",function(snapshot){
            $scope.messages = snapshot.val();
            console.log(snapshot.val());
          });
        });
    </script>
</head>
<body>
    <div class="container" ng-app="theapp" ng-controller="generalController">
        {{ 1+1 }}
        <ul>
            <li ng-repeat="message in messages">
                {{ message.messageContent }}
            </li>
        </ul>
    </div>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

你错过了$scope.$apply(),因为你已经超出了角度消化周期。

rootRef.on("value",function(snapshot){
    $scope.messages = snapshot.val();
    console.log(snapshot.val());
    $scope.$apply();
});