Нажатие и получение данных от Firebase в застройках AngularJS

Я пытаюсь хранить и извлекать данные на firebase, используя AngularJS. Я разработал до сих пор проект Ionic tabs и создал пользовательский контроллер и пользовательский factory. Я понимаю, что это соглашение для получения данных в factory и обрабатывать его через контроллеры. Однако я не понимаю, почему мой следующий код не работает:

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 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

<!-- 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 -->
 
 <!-- firebase (loaded after ionic bundle) -->
 
 
 
 <!-- cordova script (this will be a 404 during development) -->
 
 <!-- your app js -->
 
 
 
 
 
 <!-- 
 The nav bar that will be updated as we navigate between views.
 -->
 <ion-nav-bar>
 <ion-nav-back-button>
 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).
 -->

И данные в Firebase.io(импортированный файл .JSON):

{"friendlist":[
 {"firstName":"John", "lastName":"Doe"}, 
 {"firstName":"Anna", "lastName":"Smith"},
 {"firstName":"Peter", "lastName":"Jones"}
]}
2 ответа

Я думаю, что вы столкнулись с проблемой асинхронной загрузки данных. Я не уверен в $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];
 }
 }
}])

ИЛИ

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];
 }
 }
 }])


Я попытался ответить выше, и это не сработает из-за этой проблемы:

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];
 }
 }
}])

licensed under cc by-sa 3.0 with attribution.