使用$ resource的AngularJS和ui-grid交互

我是angular JS的全新品牌，顯然也是ui-grid。我得到的數據使用$資源在網格中顯示，並試圖通過允許編輯和保存行等來進入下一個級別。

我以Saving row data with AngularJS ui-grid $scope.saveRow爲例，並創建了Plunker http://plnkr.co/edit/Gj07SqU9uFIJlv1Ie6S5來嘗試它。但是，由於某種原因，我無法理解，我的行爲並不起作用，事實上它會在行中產生一個異常： gridApi.rowEdit.on.saveRow（self，self.saveRow）;

而我完全理解爲什麼。我意識到saveRow函數是空的，但是在這個階段的目標只是在行被編輯時調用它。

任何幫助將不勝感激。

的Plunker的代碼如下：

(function() { 
    var app = angular.module('testGrid', ['ngResource', 'ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit' /*, 'ui.grid.cellNav'*/ ]); 

    app.factory('Series', function($resource) { 
     return $resource('/api/series/:id', { 
      id: '@SeriesId' 
     }); 
    }); 

    var myData = [{ 
     SeriesId: 1, 
     SeriesName: 'Series 1' 
    }, { 
     SeriesId: 2, 
     SeriesName: 'Series 2' 
    }]; 

app.directive('gridContent', function() { 
var deleteTemplate = '<input type="button" value="Delete" ng-click="getExternalScopes().deleteRow(row)" />'; 
var commandheaderTemplate = '<input type="button" value="Add Series" ng-click="getExternalScopes().addNew()" />'; 

return { 
    restrict: 'E', 
    templateUrl: 'grid.html', 
    controllerAs: 'gridseries', 
    controller: function(Series) { 
    var self = this; 

    this.saveRow = function(rowEntity) { 
     i = 0; 
    }; 

    this.gridOptions = {}; 
    this.gridOptions.columnDefs = [{ 
     name: 'SeriesId', 
     visible: false 
    }, { 
     name: 'SeriesName', 
     displayName: 'Name', 
     enableCellEdit: true 
    }, { 
     name: 'Command', 
     displayName: 'Command', 
     cellTemplate: deleteTemplate, 
     headerCellTemplate: commandheaderTemplate 
    }]; 

    this.gridOptions.onRegisterApi = function(gridApi) { 
     self.gridApi = gridApi; 
     gridApi.rowEdit.on.saveRow(self, self.saveRow); 
    }; 

    this.gridOptions.data = myData; 

    this.gridScope = { 
     deleteRow: function(row) { 
     var index = myData.indexOf(row.entity); 
     self.gridOptions.data.splice(index, 1); 
     }, 

     addNew: function() { 
     self.gridOptions.data.push({ 
      SeriesName: 'Add a name' 
     }); 
     } 
    }; 
    } 
}; 

}); 
})();

我不知道爲什麼代碼沒有剪切和粘貼正確的，但所有的代碼是在Plunker任何方式。

在此先感謝。

來源

2015-02-07 Martin Horton

我認爲這裏的主要問題是您使用控制器作爲語法，而不是$ scope設置。註冊一個事件需要一個$ scope，因爲事件處理器會在$ scope的destroy事件後再次被移除。

速記解決方法是使用$ rootScope代替，但這可能會隨着時間的推移給您一個內存泄漏。

gridApi.rowEdit.on.saveRow($rootScope, self.saveRow);

參見：http://plnkr.co/edit/Gj07SqU9uFIJlv1Ie6S5?p=preview

由於這個代碼也有點老了，我不得不更新到新AppScope還能安排，而不是externalScope。

來源

2015-03-15 23:49:14 PaulL

使用$ resource的AngularJS和ui-grid交互

回答

相關問題