个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 08:10:00 25 4
gpt4 key购买 nike

我正在尝试使用 AngularJS 在 firebase 上存储和检索我的数据。到目前为止，我已经建立了一个 ionic 标签 项目并创建了一个自定义 Controller 和自定义工厂。我知道在工厂中检索数据并通过 Controller 处理它是一种约定。但是，我不明白为什么我的以下代码不起作用:

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

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

// OTHER CONTROLLERS

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

tab-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', ['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];
        }
      }
    }])

关于angularjs - 在 AngularJS 工厂中从 Firebase 推送和获取数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27271013/

25 4 0
文章推荐： angularjs - 使用 Ionic 时，localStorage 在应用程序中的什么位置？
文章推荐： Angularjs:ng-repeat + ng-switch-when != expected
文章推荐： ibm-cloud - Fabric composer 与 Bluemix 区 block 链服务的集成
文章推荐： vim - 为什么Vim在加入行时会添加空格？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com