检索要列出的数据 Firebase

Question

我正在尝试从 Firebase 数据库中检索我的待办事项，但我的视图中没有显示任何数据。我的控制台上没有错误。

我到达，在 firebase 中“保存数据”。

我的代码：

var app = angular.module('starter', ['ionic', 'firebase']);

var fb = null; 

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }

    var config = {
      apiKey: "...",
      authDomain: "...",
      databaseURL: "...",
      storageBucket: "...",
      messagingSenderId: "..."

    firebase.initializeApp(config);

  });
});
  
app.controller('TodoCtrl', function($firebaseObject,$scope, $ionicPopup){
  $scope.list = function(){

   var user = firebase.auth().currentUser;

    if(user != null){
      alert('user ' + user.uid + ' exists!');

      var ref = firebase.database().ref('/users/').child(user.uid);
      var syncObject = $firebaseObject(ref);
      syncObject.$bindTo($scope, "data");

    }else{
      alert('error');
    }
  }


  $scope.create = function() {
    var user = firebase.auth().currentUser;

    $ionicPopup.prompt({
      title: 'Enter a new TODO item',
      inputType: 'text'
    })
    .then(function(result) {
      if(result !== "") {
        firebase.database().ref("/users/").child(user.uid).push({
          todos: result
        });

      }
    });
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ion-view view-title="Todo" ng-init="list()">
    <ion-nav-buttons side="right">
        <button class="right button-icon icon ion-plus" ng-click="create()" ></button>
    </ion-nav-buttons>
    <ion-content>
        <div class="list">
        <div ng-repeat="todo in data.todos" class="item">
            {{todo.todos}}
        </div>
    </ion-content>
</ion-view>

My Firebase database

提前感谢您的帮助。

Answer 1

为什么不在声明后执行列表函数，让一切正常工作。

var app = angular.module('starter', ['ionic', 'firebase']);

var fb = null; 

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }

    var config = {
      apiKey: "...",
      authDomain: "...",
      databaseURL: "...",
      storageBucket: "...",
      messagingSenderId: "..."

    firebase.initializeApp(config);

  });
});
  
app.controller('TodoCtrl', function($firebaseObject,$scope, $ionicPopup){
   var list = function(){

   var user = firebase.auth().currentUser;

    if(user != null){
      alert('user ' + user.uid + ' exists!');

      var ref = firebase.database().ref('/users/').child(user.uid);
      var syncObject = $firebaseObject(ref);
      syncObject.$bindTo($scope, "data");

    }else{
      alert('error');
    }
  }

  // execute the function at this point.
  list();

  $scope.create = function() {
    var user = firebase.auth().currentUser;

    $ionicPopup.prompt({
      title: 'Enter a new TODO item',
      inputType: 'text'
    })
    .then(function(result) {
      if(result !== "") {
        firebase.database().ref("/users/").child(user.uid).push({
          todos: result
        });

      }
    });
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- you are fine to make minor changes here-->
<ion-view view-title="Todo" ng-controller="TodoCtrl">
    <ion-nav-buttons side="right">
        <button class="right button-icon icon ion-plus" ng-click="create()" ></button>
    </ion-nav-buttons>
    <ion-content>
        <div class="list">
        <div ng-repeat="todo in data.todos" class="item">
            {{todo.todos}}
        </div>
    </ion-content>
</ion-view>