Javascript 如何在angularFire 0.5.0和最新ng网格之间创建三向数据绑定？

angularFire$bind方法可在此处找到：最新的ng网格可在此处找到：

我尝试了最简单的解决方案，但没有成功：

$scope.myData = [{name: "Moroni", age: 50},
                 {name: "Tiancum", age: 43},
                 {name: "Jacob", age: 27},
                 {name: "Nephi", age: 29},
                 {name: "Enos", age: 34}];
$scope.gridOptions = { 
    data: 'myData',

    rowTemplate:'<div ng-style="{\'cursor\': row.cursor, \'z-index\': col.zIndex(), \'color\': \'rgb(248, 248, 248)\',\'background\': \'none repeat scroll 0% 0% rgba(51, 51, 51, 0.7)\' }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}" ng-cell></div>',
    headerRowTemplate: '<div ng-style="{ height: col.headerRowHeight,\'color\': \'rgb(248, 248, 248)\',\'background\': \'none repeat scroll 0% 0% rgba(51, 51, 51, 0.7)\'  }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngHeaderCell" ng-header-cell></div>',
    multiSelect: false,
    enableCellEditOnFocus: true,
    columnDefs: [{field: 'name', displayName: 'Name',editableCellTemplate: '<input type="text" ng-class="\'colt\' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" />'},
                 {field:'age', displayName:'Age',editableCellTemplate: '<input type="text" ng-class="\'colt\' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" />'}]


};
$scope.myData.$bind($scope,'gridData');

$scope.myData=[{name:“Moroni”，年龄：50}，
{姓名：“Tiancum”，年龄：43}，
{姓名：“雅各布”，年龄：27}，
{姓名：“尼菲”，年龄：29}，
{姓名：“埃诺斯”，年龄：34}]；
$scope.gridOptions={
数据：“myData”，
行模板：“”，
headerRowTemplate:“”，
多选：错，
enableCellEditOnFocus:true，
columnDefs:[{field:'name'，displayName:'name'，editableCellTemplate:'}，
{字段：'age'，显示名称：'age'，editableCellTemplate:''}]
};
$scope.myData.$bind（$scope，'gridData'）；

然后

<div class="gridStyle" ng-grid="gridOptions" ng-model="gridData"></div>

---

我是说，这可能吗？：）

这当然是可能的。在讨论如何操作之前，让我们回顾一下几个重要的细节：

Firebase和angularFire都在对象中工作，ngGrid需要阵列（我们需要一个过滤器）

angularFire是常见用例的优秀包装器，但不是访问Firebase的唯一方法

Firebase中有一个功能，可以自动将顺序数字ID转换为数组，我们可以利用它

因此，考虑到这些细节，有两种简单的方法

利用Firebase阵列仿真

假设我们的数据是一个简单的数组，并且我们不会删除密钥（如果ID不连续，那么我们的数组将成为一个对象），那么我们可以直接从Firebase引用数据

这是：

对angularFire数据使用过滤器

但是，如果我们想坚持使用纯angularFire，或者我们的数据将由多个用户实时编辑（这将对阵列造成严重破坏），我们可以使用orderByPriority过滤器将数据过滤到阵列中

这是：

---

但这还不是三向绑定，因为当我在ng grid中编辑单元格，然后单击单元格外时，值也应该在firebase中更新：）工作得很好，只是我更新的值在firebase中不更新：（如果我添加

ng blur=“updateEntity（col，row）”

到我的

editableCellTemplate:

中，然后我添加了这个：

$scope.updateEntity=function（col，row）{console.log（row.entity）；console.log（col.field）；}；

控制台完全注销，但我也得到了这个错误：

错误：Firebase.set失败：第一个参数包含无效的键（$id）在属性“targetScope”中。键必须是非空字符串，并且不能包含“.”、“$”、“/”、“[”或“]”

@katoSolved:

var app = angular.module('app', ['firebase', 'ngGrid']);
var fb = new Firebase('https://nggrid-example.firebaseio-demo.com/');

app.controller('ctrl', function($timeout, $scope) {
    $scope.myData = [];
    fb.on('value', function(snap) {
        // force a compile since we aren't in $digest
        $timeout(function() {
           $scope.myData = snap.val();
        });
    });
    $scope.gridOptions = { data: 'myData' };
});

var app = angular.module('app', ['firebase', 'ngGrid']);
var fb = new Firebase('https://nggrid-example.firebaseio-demo.com/');

app.controller('ctrl', function($firebase, $scope, orderByPriorityFilter) {
    $scope.data = $firebase(fb);
    $scope.myData = $firebase(fb);
    $scope.$watchCollection('data', function() {
       $scope.myData = orderByPriorityFilter($scope.data); 
    });
    $scope.gridOptions = { data: 'myData' };
});