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

时间:2021-10-07 20:15:20

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.

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

Here are my scripst: app.js ( I'm only showing part of them )

这是我的脚本: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');

  });

Here is my services file --- services.js where I connect to Firebase

这是我的服务文件--- 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;
    }
}
});

And finally here is my controller.js

最后这是我的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

当我单击列表中的任何项目时,我收到以下错误消息:TypeError:refCorales.get不是函数

Any idea how to avoid this erro? In advance, thank you !

任何想法如何避免这种错误?提前谢谢!

Victor

1 个解决方案

#1


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:

我看到的问题是您的服务代码非常不清楚,并且没有返回访问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();
    }
  };
})

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

#1


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:

我看到的问题是您的服务代码非常不清楚,并且没有返回访问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();
    }
  };
})

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