Question

我正在尝试使用AngularJS在firebase上存储和检索我的数据。到目前为止，我已经构建了一个 Ionic选项卡项目，并创建了一个自定义控制器和自定义工厂。我知道在工厂中检索数据并通过控制器处理数据是一种惯例。但是，我不明白为什么我的以下代码不起作用：

services.js

angular.module('starter.services', ['firebase'])

.factory('OtherFriends', ['$firebase', function ($firebase) {

  var ref = new Firebase("https://example1234.firebaseio.com/friendlist");
  var sync = $firebase(ref);

  var otherfriends = sync.$asArray();

  return {
    all: function() {
      return otherfriends;
    },
    get: function(friendId) {
      // Simple index lookup
      return otherfriends[friendId];
    }
  }
}])

controllers.js

angular.module('starter.controllers', [])

// OTHER CONTROLLERS

.controller('OtherFriendsCtrl', function($scope, OtherFriends) {
  $scope.otherfriends = OtherFriends.all();
})

标签-otherfriends.html

<ion-view title="OtherFriends">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="otherfriend in otherfriends" type="item-text-wrap" href="#/tab/otherfriend/{{otherfriend.id}}">
        {{otherfriend.name}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

app.js

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'firebase'])

// OTHER STANDARD IONIC CODE

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

    // setup an abstract state for the tabs directive
    .state('tab', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })

    .state('tab.otherfriends', {
      url: '/otherfriends',
      views: {
        'tab-otherfriends': {
          templateUrl: 'templates/tab-otherfriends.html',
          controller: 'OtherFriendsCtrl'
        }
      }
    })

  // OTHER TABS

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});

的index.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">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->


    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- firebase (loaded after ionic bundle) -->
    <script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
    <script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-app="starter" animation="slide-left-right-ios7">
    <!-- 
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">
        Back
      </ion-nav-back-button>
    </ion-nav-bar>
    <!-- 
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view></ion-nav-view>


  </body>
</html>

Firebase.io中的数据（导入的.JSON文件）：

{"friendlist":[
    {"firstName":"John", "lastName":"Doe"}, 
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

Answer 1

我认为您正面临一些异步数据加载问题。我不确定$ firebase，但你只是尝试

angular.module('starter.services', ['firebase'])

.factory('OtherFriends', ['$firebase', function ($firebase) {

  var ref = new Firebase("https://example1234.firebaseio.com/");
  var sync = $firebase(ref);

  return {
    all: function() {
      return sync.$asArray();
    },
    get: function(friendId) {
      // Simple index lookup
      return otherfriends[friendId];
    }
  }
}])

OR

angular.module('starter.services', ['firebase'])

    .factory('OtherFriends', ['$firebase', function ($firebase) {

      var ref = new Firebase("https://example1234.firebaseio.com/");

      return {
        all: function() {
          return $firebase(ref).$asArray();
        },
        get: function(friendId) {
          // Simple index lookup
          return otherfriends[friendId];
        }
      }
    }])

Answer 2

我尝试了上面的答案，由于这个问题，它无法工作：

https://github.com/mappmechanic/ionic-firebase/issues/5

您必须使用$firebaseArray而不是$firebase。

示例：

app.factory('MealsFromDB', ['$firebaseArray', function ($firebaseArray) {

    var ref = new Firebase("https://[yourappname].firebaseio.com");
    var meals = $firebaseArray(ref.child('courses'));

    return {
        all: function() {
            return meals;
        },
        get: function(id) {
            // Simple index lookup
            return meals[id];
        }
    }
}])

在AngularJS工厂中从Firebase推送和获取数据

2 个答案: