下面的控制器为视图提供表格和表单。表的相关部分是:
<tr ng-repeat="obj in tab.col | filter:filterObj" ng-click="select(obj)" ng-class="isSelected(obj)">
如果点击了一行,表单会显示 obj 的详细信息(其模型是 tab.obj),您可以对其进行编辑。当用户在表单字段中修改 obj 时,该表会适当地获得更新,但 firebase 不会获得任何更新,而是添加新对象(这是通过 array.push(obj) 完成的)。
define(['app'], function(app) {
app.controller('LinksCtrl',['$scope', '$filter', '$http','angularFire','angularFireAuth', function($scope,$filter,$http, angularFire, angularFireAuth) {
$scope.links = {};
$scope.tabs = [];
var url = "https://<url>.firebaseio.com/links";
angularFireAuth.initialize(url, {scope: $scope, name: "user", path: "/"});
var promise = angularFire(url, $scope, 'links', {})
$scope.select = function (item) {
for(i in $scope.tabs) {
var tab = $scope.tabs[i];
if (tab.active) {
tab.obj = item;
if (tab.obj.selected) {
tab.obj.selected = ! tab.obj.selected;
} else {
tab.obj.selected = true;
// $scope.$apply();
}
}
}
};
$scope.isSelected = function(obj) {
if (obj.selected && obj.selected === true) {
return "active";
}
return "";
}
promise.then(function() {
$scope.tabs.push({
title: 'links',
disabled: false,
active: false,
col: $scope.links.open, //this is an array of objects
obj: {}
});
$scope.tabs[0].active = true;
for(i in $scope.tabs) {
var tab = $scope.tabs[i];
tab.actions = app.actions();
// app.actions returns an array with more objects like the following doing CRUD and other basic stuff
tab.actions.push({
name: 'Delete link',
icon: 'icon-minus',
cond: function(tab) { if ('selected' in tab.obj) { return tab.obj.selected}; return false; },
func: function(tab) {
// splice tab.col or whatever modification
}
});
};
});
}]);
});
我怎样才能使这样的工作?是否应该通过集合转向手动同步?使用 console.log 进行调试显示对象 obj 在代码的所有阶段都具有它应该具有的内容(它具有原型、哈希码等),只是 firebase 没有得到更新。
更新:
我有一个可行的解决方案。似乎这是一个绑定问题,或类似的问题,但我不确定发生了什么。tabs[i].col = $scope.links.i 的分配看起来像是罪魁祸首(在这种情况下 i = 'open' :-?。这可能是我对角度的使用。
controller scope ------
// get the firebase data and store it in
var promise = angularFire(url, $scope, 'links', {})
// build the tabs structure, where tabs[i].col = $scope.links.i
// build actions for each tab
// create an empty tabs[i].obj to use in the form model
ng-repeat scope -------
// iterate over the tab structure
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
ng-repeat scope --------
// Iterate over the elements, so we can select one, and edit it, updating firebase
// If we iterate over tab.col, firebase does not get the updates, but If we iterate over
// the original $scope.links variable, it works as expected
<tr ng-repeat="obj in links[tab.title] | filter:filterObj | orderBy: 'date':true" ng-click="select(obj)" ng-class="isSelected(obj)">