Angularjs 如何使用UI网格和Firebase执行三向绑定？

我有一个有角度的UI网格，其中充满了我从Firebase中提取的数据。网格表使用带有AngularFire的$.asArray方法可以完美地查看，相关代码片段如下所示

Html视图：

<!-- UI-Grid -->
<div ui-grid="gridOptions" class="ui-grid" ui-grid-resize-columns ui-grid-edit></div>

var ref = new Firebase("https://commentme.firebaseio.com/comments");    

// create an AngularFire reference to the data
var sync = $firebase(ref);

// create a synchronized array for use in our HTML code
$scope.comments = sync.$asArray();

$scope.newComment = {text: '', date: ''};

// pushes data back to Firebase Array
$scope.addComment = function(){
  $scope.comments.$add($scope.newComment);           
  $scope.newComment = {text: '', date: ''};

// UI Grid Options  
$scope.gridOptions = {
  enableSorting: true,
  columnDefs: [
  { name: 'comments', field: 'text'},
  { name: 'date', field: 'date'}

  ],
  data: $scope.comments 
};

<!-- UI-Grid -->
<div ui-grid="gridOptions" class="ui-grid" ui-grid-resize-columns ui-grid-edit ui-grid-row-edit ui-grid-cellNav></div>

$scope.gridOptions.onRegisterApi = function(gridApi){

  //set gridApi on scope
  $scope.gridApi = gridApi;                  
  gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
};

$scope.saveRow = function( rowEntity ) { 

  //Firebase save and promise return
  $scope.comments.$save(rowEntity).then(function(ref){
    ref = $scope.comments;   
  }); 

  // create a fake promise - normally you'd use the promise returned by $http or $resource
  var promise = $q.defer();
  $scope.gridApi.rowEdit.setSavePromise( $scope.gridApi.grid, rowEntity, promise.promise );

  // fake a delay of 1 seconds whilst the save occurs, return error if item is empty
  $interval( function() {
    if (rowEntity === '' ){
      promise.reject();
    } else {
        promise.resolve();
      }
    }, 1000, 1);      

};

但是，问题是，当我编辑UI网格（使用UI.Grid.edit模块）时，这些更改只能反映在我的DOM上，并且不能持久/三向绑定回Firebase后端

我尝试用这样的代码在ColumnDefs中使用editableCellTemplate绑定ng模型和ng更改，但仍然无法使其正常工作

editableCellTemplate: '<input type="text" ng-model="text" ng-change="comments.$save(text)">

---

我使用了一个虚假的承诺，因为我不知道如何将Firebase返回的承诺绑定到setSavePromise方法。需要承诺，因为UI网格将不允许您在未返回承诺的情况下重新编辑单元格。

您的ng更改正在尝试将单个字符串保存为记录。您不能随意将任何值传递到$save中；它必须是行索引或行本身

查看，似乎每次一行“保存”时都可以触发一个事件。我建议你仔细研究一下那份文件

类似于此的操作应该可以实现，因为saveRow observable将返回该电子表格行中存在的任何数据对象（即$asArray中的记录）：

---

谢谢你给我指路！您是否知道如何将Firebase的返回承诺绑定到setSavePromise方法？

$scope.gridOptions.onRegisterApi = function(gridApi){
  gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
};

$scope.saveRow = function(item) {
  $scope.comments.$save(item);
};