Ionic Angular Firebase 将值传递到另一个选项卡答案

【问题标题】：Ionic Angular Firebase pass value to another tabIonic Angular Firebase 将值传递到另一个选项卡
【发布时间】：2015-06-15 18:36:39
【问题描述】：

我是 Ionic 的新手，我已经有几天遇到这个问题了。我从聊天示例创建了一个应用程序，我想连接并读取我的 firebase 数据库。第一部分是 woking.- 我可以从 firebase 检索和显示数据，但我的问题是当我单击“项目列表”并想要显示详细描述时，我不明白如何传递值并再次获取数据。

这是我的脚本： app.js（我只展示了一部分）

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

.run(function($ionicPlatform) {
 $ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar    above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins &&      window.cordova.plugins.Keyboard) {
  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
  // org.apache.cordova.statusbar required
  StatusBar.styleLightContent();
}
});
})


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

$stateProvider

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

// Each tab has its own nav history stack:

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

 .state('tab.chats', {
  url: '/chats',
  views: {
    'tab-chats': {
      templateUrl: 'templates/tab-chats.html',
      controller: 'ChatsCtrl'
    }
  }
   })
   .state('tab.chat-detail', {
  url: '/chats/:chatId',
  views: {
    'tab-chats': {
      templateUrl: 'templates/chat-detail.html',
      controller: 'ChatDetailCtrl'
    }
  }
})

 .state('tab.account', {
  url: '/account',
views: {
  'tab-account': {
    templateUrl: 'templates/tab-account.html',
    controller: 'AccountCtrl'
  }
  }
 });

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

  });

这是我的服务文件 --- 我连接到 Firebase 的 services.js

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

.factory('fireBaseData', function($firebase) {
  // Might use a resource here that returns a JSON array
  var ref = new Firebase("https://scorching-fire-921.firebaseio.com/")
   refCorales = new Firebase("https://scorching-fire-  921.firebaseio.com/corales/");

 var fireBaseData = {
   all: refCorales,    
    get: function (chatId) {
    return $firebase(ref.child('refCorales').child(chatId)).$asObject();
    }
}; 
  return {
    ref: function() {
        return ref;
    },
     refCorales: function() {
        return refCorales;
    }
}
});

最后是我的controller.js

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

.controller('DashCtrl', function($scope) {})

.controller('ChatsCtrl', function($scope, $firebase, fireBaseData) {
 $scope.corales  = $firebase(refCorales);

 })

.controller('ChatDetailCtrl', function($scope, $stateParams, fireBaseData) {

  $scope.corales = refCorales.get($stateParams.chat$id);
 })



 .controller('AccountCtrl', function($scope) {
  $scope.settings = {
     enableFriends: true
  };
 });

当我单击列表中的任何项目时，我会收到以下错误消息：TypeError: refCorales.get is not a function

知道如何避免这个错误吗？先谢谢了！

维克多

【问题讨论】：

标签： angularjs firebase ionic-framework

【解决方案1】：

我看到的问题是您的服务代码非常不清楚，并且没有返回访问 var fireBaseData 的方法。另外，您为什么要使用 ref.child('corales') 进行两个 firebase 引用而不是简单的引用？这将是我的解决方案：

.factory('fireBaseData', function($firebase) {
  //Firebase reference
  var ref = new Firebase("https://scorching-fire-921.firebaseio.com/")
  return {
    ref: function(){ 
      return ref;
    },
    //I don't know if this is actually necessary
    refCorales: function(){
      return ref.child('corales');
    },
    get: function(chatId){
      $firebase(ref.child('corales').child(chatId)).$asObject();
    }
  };
})

更新还对您的控制器进行了一些更改：

.controller('ChatsCtrl', function($scope, fireBaseData) {
  $scope.corales = fireBaseData.refCorales();
})
.controller('ChatDetailCtrl', function($scope, $stateParams, fireBaseData) {
  $scope.corales = fireBaseData.get($stateParams.chat$id);
})

【讨论】：