在AngularJS中推送並從Firebase獲取數據工廠

我試圖在使用AngularJS的Firebase上存儲和檢索我的數據。我已經建立了迄今爲止的一個離子選項卡項目並創建了一個自定義控制器和自定義工廠。我明白，在工廠中檢索數據並通過控制器處理數據是一種慣例。不過，我不明白爲什麼我下面的代碼無法正常工作：在AngularJS中推送並從Firebase獲取數據工廠

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"} 
]}

來源

2014-12-03 JohnAndrews

「不工作」。你能更具體地瞭解會發生什麼嗎？數據沒有顯示？你是否收到任何錯誤訊息？你已經在你的'OtherFriends.all（）'函數中設置了一個斷點嗎？這是否被觸發？ – 2014-12-03 16:24:29

爲什麼OtherFriends會返回這個尷尬的all/get包裝器對象而不是'return $ firebase（ref）。$ asArray（）'？ synchronized數組已經有了一個'$ getRecord'方法，所以'get'方法是多餘的，因爲'all'只是返回數組，所以它也是重複的。 – Kato 2014-12-04 21:41:43

我認爲你正在面對一些異步數據加載起訴。我不知道有關$火力點，但你只是嘗試

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

來源

2014-12-03 12:22:44 Saidh

工作。我之前沒有得到異步加載的觀點。 – JohnAndrews 2014-12-08 16:52:51

只是爲了澄清答案，問題是在工廠中再次調用'var otherfriends = sync。$ asArray（）;'時，它已經在控制器中定義爲'$ scope.otherfriends'？ – 2016-03-24 09:51:20

我嘗試了上述回答，並不會由於這個問題的工作：

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

來源

2016-03-24 10:01:01

在AngularJS中推送並從Firebase獲取數據工廠

回答

相關問題