Question

我是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');

  });

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

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不是函数

任何想法如何避免这种错误？提前谢谢！

维克多

Answer 1

我看到的问题是您的服务代码非常不清楚，并且没有返回访问var fireBaseData的方法。另外你为什么要制作两个firebase参考而不是简单的使用ref.child（＆＃39; corales＆＃39;）？这将是我的解决方案：

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

Ionic Angular Firebase将值传递给另一个选项卡

1 个答案: