我正在尝试实现列表详细信息视图。该列表由$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。
如果需要,我可以发布更多代码
编辑
这是代码的抽象
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
所做的解决方法都是不必要的。需要解决的问题是由我认为不相关的代码的另一部分引起的。我为这个错误表示歉意。我将删除此问题和相关的问题
最佳答案
尝试使用观察程序重新加载数据:
var fireList = new Firebase("https://xxxxx.firebaseio.com/list");
var r = $firebaseArray(fireList);
r.$watch(function() {
r.$loaded(function () {
vm.list = r;
});
});
这是一种轻松处理更新的常用方法,可能会解决您的问题。