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

发布时间：2020-12-17 17:49:27 所属栏目：安全来源：网络整理

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

我正在尝试使用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"}
]}

解决方法

我认为您正面临一些异步数据加载问题.我不确定$firebase,但你试试吧

angular.module('starter.services',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',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];
        }
      }
    }])

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!