$firebaseArray 在保存子元素后失去功能

Question

我正在尝试实现列表详细信息视图。该列表是用 $firebaseArray(ref) 生成的。单击列表中的项目时，列表控制器使用 list.$getRecord(item.$id) 获取特定记录。将它放在一个全局服务中（带有 set 和 get 的空对象），在我的详细信息控制器中，我将该服务（已经设置为所选项目）分配给详细信息控制器中的范围变量并显示它。

详细视图中的信息是可编辑的。当它被编辑时，会出现一个保存按钮，点击它会使用此代码保存编辑

item = editItem; //editItem contains the new changes made on the detail page 
list.$save(item).then(function(ref){
    //ref.key() === item.$id; // 
    console.log("Your Edit has been saved');
  });

这行得通。编辑反映在远程 firebase 数据上。

但是当我导航回列表视图并尝试单击另一个项目时出现问题。它得到一个错误，说 list.$getRecord() 不是一个函数。现在，当您不在详细信息视图中保存编辑时，不会发生此错误。

我在保存前后打印了列表数组，我意识到了这一点

保存项目前的列表数组（包含 AngularFire 方法）

项目保存后的列表数组（不再包含 AngularFire 方法）

我不知道为什么 $firebaseArray 会这样反应。有什么我想念的吗？这是正常行为吗？ PS：我正在使用 ionic 和 angularFire。

如果需要，我可以post更多代码

编辑这是代码的抽象

List.html

<ion-list>
    <ion-item href="#/lead/info"  ng-click="vm.selectItem(l.$id)" ng-repeat="l in vm.list" >
      <h3>{{l.firstName}} {{l.lastName}}</h3>
      <h4 class="">
        <p>{{l.topic}}</p>
      </h4>
    </ion-item>
  </ion-list>

list.js（控制器功能）

function ListCtrl(selectedItem, $firebaseArray) {
    /* jshint validthis: true */
    var vm = this;

    vm.list= {};
    vm.selectItem = selectItem;
    loadList(); //Loads the List array

function loadList() {

  var fireList = new Firebase("https://xxxxx.firebaseio.com/list");
  var r = $firebaseArray(fireList);

  r.$loaded(function () {
    vm.list = r;
  });

  console.log(vm.list); //Outputs the first image(above). But after an item edit and i go back, outputs the second image(above)
}

    function selectItem(index) {
      var sItem = vm.list.$getRecord(index);

      selectedItem.setList(vm.list);
      selectedItem.setItem(sItem);
    }
}

selectedItem服务很简单。我用它来设置单个对象或对象数组

function selectedItem() {
    var sItem = {};
    var List = {};

    return {
        getItem: function () {
            return sItem;
        },
        setItem: function (authObject) {
            sItem = authObject;
        },
        getList: function(){
          return List;
        },
        setList: function(al){
          List = al;
        }
    };
  };

细节视图控制器是这样的：

item.js(控制器功能)

function ItemCtrl(selectedItem, $scope, $firebaseObject) {
    /* jshint validthis: true */
    var vm = this;
    $scope.selectedItem = selectedItem.getItem();
    $scope.listArray = selectedItem.getList();
    //vm.item = $scope.selectedItem;

 function saveEdit() {

      var t = $scope.selectedItem;

      $scope.listArray.$save(t).then(function(ref){
        //console.log(ref);
      });     
    }
  };

更新

在对我的代码进行认真的交叉检查后，我意识到问题不是来自 AngularFiire 数组。即使是我对 r.$watch 和 r.$loaded 所做的解决方法也是不必要的。需要变通的原因是我认为不相关的另一部分代码。我为这个错误道歉。我很快就会删除这个问题和一个相关问题

Answer 1

尝试使用观察器重新加载数据：

var fireList = new Firebase("https://xxxxx.firebaseio.com/list");
var r = $firebaseArray(fireList);

r.$watch(function() {
  r.$loaded(function () {
    vm.list = r;
  });
});

这是一种常见的处理更新的简单方法，可能会解决您的问题。

$firebaseArray 在保存子元素后失去功能

$firebaseArray losing functions after saving a child element

javascript

arrays

firebase

angularfire

ionic