angularjs - 在从firebase获取数据时，ng-repeat在离子中不能正常工作 - Thinbug

在从firebase获取数据时，ng-repeat在离子中不能正常工作

时间：2016-08-13 08:29:28

标签： angularjs ionic-framework firebase firebase-realtime-database

我正在创建一个使用ionic和firebase的简单todo应用程序。数据来自firebase但未在视图中显示。但是当我点击右上角的添加按钮然后显示火力数据时，请显示或建议我出错的地方

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.2.1/firebase.js"></script>
  </head>
    <body ng-app="starter">
    <ion-pane ng-controller="contrl" ng-init="load_todo()">
      <ion-header-bar class="bar-stable" >
        <h1 class="title">Todo</h1>
        <button class="button button-clear button-positive" ng-click="showPopup()" ><i class="icon ion-ios-plus"></i></button>
      </ion-header-bar>
      <ion-content>
        <ion-list>
          <ion-item ng-repeat="todoo in todos">
            {{todoo.task}}!
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-pane>
  </body>
</html>

脚本

var app=angular.module('starter', ['ionic']);
var config = {
  apiKey: "AIzaSyAxwEYpUn2Kwvf65TApqIlk3Nv5LW9iHug",
  authDomain: "fir-demo-948d9.firebaseapp.com",
  databaseURL: "https://fir-demo-948d9.firebaseio.com",
  storageBucket: "fir-demo-948d9.appspot.com",
};


app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

app.controller('contrl',function($scope,$ionicPopup) {
  var app=firebase.initializeApp(config);
  var database=app.database();
  var auth=app.auth();
  var storage=app.storage();
  var databaseref=database.ref();

  $scope.todos={};

  $scope.load_todo = function() {
    databaseref.on("value", function(snapshot) {
      $scope.todos=snapshot.val();
      console.log($scope.todos);
    }, function (errorObject) {
      console.log("The read failed: " + errorObject.code);
    });
  }

  $scope.showPopup = function() {
    $scope.data = {}
    var myPopup = $ionicPopup.show({
      template: ' Enter Task<input type="text" ng-model="data.todo">',
      title: 'Add Todo',
      scope: $scope,
      buttons: [{
        text: 'Cancel'
      }, {
        text: '<b>Save</b>',
        type: 'button-positive',
        onTap: function(e) {
          if (!$scope.data.todo) {
            e.preventDefault();
          } else {
            return $scope.data;
          }
        }
      }, ]
    });
    myPopup.then(function(res) {
      if (res) {
        databaseref.push({'task': res.todo });
        console.log("task added");
      }else{
        console.log("task not added");
      }
    });
  };


})

1 个答案:

答案 0 :(得分：3)

加载项目后调用$scope.$apply();，以更新绑定！

 $scope.load_todo = function() {
    databaseref.on("value", function(snapshot) {
      $scope.todos=snapshot.val();
      $scope.$apply();
      console.log($scope.todos);
    }, function (errorObject) {
      console.log("The read failed: " + errorObject.code);
    });
  }

以下是workingApp