AngularJs,Ionic和Firebase数据在通过状态时遇到问题

时间:2015-11-07 09:07:50

标签: angularjs ionic-framework firebase ionic factory

我的Fire基础数据奇怪地显示在我的Dash.html上,它显示的是包含数据库中所有信息的卡片,但是当我点击它们时,信息没有被移动,它也显示最后一个数据库中的项目10次,然后我点击它们,看到数据被移动...

我正在尝试获得一个人员列表,然后我可以点击他们的卡片以获取有关该人的更多信息(在Ionic中)。

我的工厂:

.factory('PetService', function($firebaseArray, $firebaseObject) 
{

  var ref = new Firebase("firebaseURL");
  var pets = $firebaseArray(ref);

ref.once("value", function(allMessagesSnapshot) {
  allMessagesSnapshot.forEach(function(messageSnapshot) {

 for (var i=0; i<10; i++) {
    pets[i] = {
      id: i,
      'Name': messageSnapshot.child("Name").val(),
      'Offer': messageSnapshot.child("Offer").val(),
      'Image': messageSnapshot.child("Image").val(),
      'Expat': messageSnapshot.child("Expat").val(),
    };

  }


  });
});


  return {
    all: function () {
      return pets
    },
    get: function (petId) {

      return pets[petId];
    }
  };

})

我的DashCtrl:

.controller('DashCtrl', function($scope, $state, $stateParams, PetService) {
      $scope.pets = PetService.all();
})

我的个人资料控制:

.controller('ProfileCtrl', function($scope, $state, PetService) {
   $scope.pet = PetService.get($stateParams.petsId);
})

我的个人资料状态:

  .state('app.profile', {
    url: "/profile/:petsId",
    views: {
      'menuContent': {
        templateUrl: "routes/profile.html",
        controller: 'ProfileCtrl',
      }
    }
  })

我的收藏重复行(Dash.html):

<div class="col"  collection-repeat="pet in pets| orderBy:'Name'" item-width="45%" item-height="35%"  ui-sref="app.profile({petsId: pet.id })">

我的个人资料:

<div class="list" >
      <label class="item item-icon-left">
      <i class="icon ion-earth"></i>
       <h4 class="invf">Location</h4>
       <div class="invtext">{{pet.Location}}</div>
      </label>
      <label class="item item-icon-left">
      <i class="icon ion-calendar"></i>
        <h4 class="invf">Age</h4>
        <div class="invtext">{{pet.Age}}</div>
      </label>
       <label class="item item-icon-left"  style="word-wrap: break-word; width: 350px;">    
       <i class="icon ion-person"></i>
        <h4 class="invf">About me</h4>
        <div class="invtext" >{{pet.About}}</div>
      </label>
       <label class="item item-icon-left">
       <i class="icon ion-pizza"></i>
       <h4 class="invf" >What I offer</h4>
          <div class="invtext">{{pet.Offer}}</div>
      </label>
       <label class="item item-icon-left">
      <i class="icon ion-cash"></i>
        <h4 class="invf">Rate</h4>
        <div class="invtext">{{pet.Rate}}</div>
      </label>
      </div>

如果您能提供一个代码示例,说明如何通过修理我的工厂来解决这个问题,那将是惊人的!

非常感谢你的帮助!

(抱歉我的英文不好并解释!)

0 个答案:

没有答案