CODEWITHSUNDEEP
angularjsfirebaseionic-framework
CaribeSoft
CaribeSoft

Reputation: 607

Ionic Angular Firebase pass value to another tab

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

Upvotes: 0

Views: 383

Answers (1)

André Kool
André Kool

Reputation: 4978

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

Upvotes: 1

Related Questions