Ionic Angular Firebase pass value to another tab - angularjs

Question

I'm new on Ionic, and I have been a couple of days with this problem.
I create an app from chat examples, and I want to connect and read to my firebase database. The first part is woking.- I can retreive and show data from firebase, but my problem is when I click on the "Item list" and want to show detail description, I don not understand how to pass value and get the data again.
Here are my scripst:
app.js ( I'm only showing part of them )
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');
});
Here is my services file --- services.js where I connect to 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;
}
}
});
And finally here is my 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
};
});
When I click on any item of the list, I'm receiving the following error message: TypeError: refCorales.get is not a function
Any idea how to avoid this erro?
In advance, thank you !
Victor

Answer 1

The problem i see is your services code is very unclear and not returning a way to acces var fireBaseData. Also why are you making two firebase references and not simple using ref.child('corales')?
This would be my solution:
.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();
}
};
})
Update
Also some changes for your controller:
.controller('ChatsCtrl', function($scope, fireBaseData) {
$scope.corales = fireBaseData.refCorales();
})
.controller('ChatDetailCtrl', function($scope, $stateParams, fireBaseData) {
$scope.corales = fireBaseData.get($stateParams.chat$id);
})