Question

我是角度JS的新手，显然也是ui-grid。我使用$ resource将数据显示在网格中，并尝试通过编辑和保存行等来进入下一级别。

我以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中。

提前致谢。

Answer 1

我认为这里的主要问题是你使用控制器作为语法，而不是$ scope设置。注册事件需要$ scope，因为事件处理程序随后会在$ scope的destroy事件中被删除。

一种简便的解决方法是使用$ rootScope代替，但这可能会随着时间的推移而导致内存泄漏。

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

参考：http://plnkr.co/edit/Gj07SqU9uFIJlv1Ie6S5?p=preview

由于此代码也有点旧，我不得不更新到新的appScope安排而不是externalScope。

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

1 个答案: