angular-ui/ui-grid

UI-Grid should be $scope agnostic in on events (according to angular 1.6 components)

Open

#6,091 创建于 2017年3月17日

在 GitHub 查看
 (4 评论) (1 反应) (0 负责人)JavaScript (5,395 star) (2,496 fork)batch import
help wanted

描述

The following code crashes inside the self.gridApi.core.on.sortChanged function causing the following error:

asked to listen on core.on.sortChanged but scope wasn't passed in the input parameters. It is legitimate to pass null, but you've passed something else, so you probably forgot to provide scope rather than did it deliberately, not registering

angular.module('kk', ['ui.grid', 'ui.grid.pagination', 'ui.grid.selection']);

angular.module('kk')
.component('comp1', {
  controller: function() {
    var self = this;
    this.gridOptions = {
            paginationPageSizes: [25, 50, 75],
            paginationPageSize: 25,
            useExternalPagination: true,
            useExternalSorting: true,
            appScopeProvider: this,
            columnDefs: [
                { name: "id" },
                { name: "name" }
            ],
            onRegisterApi: function (gridApi) {
                self.gridApi = gridApi;
                self.gridApi.core.on.sortChanged(self, function (grid, sortColumns) {
                });
            }
    };
    this.gridOptions.totalItems = 1;
    this.gridOptions.data = [{id: 1, name: "aa"}];
  },
  template: '<div ui-grid="$ctrl.gridOptions"></div>'
});

Only works if we use $scope, but we should be angular 1.6/angular2 complaints:

angular.module('kk', ['ui.grid', 'ui.grid.pagination', 'ui.grid.selection']);

angular.module('kk')
.component('comp1', {
  bindings: {
    name: '<'
  },
  controller: function($scope) {
    var self = this;
    this.gridOptions = {
	          paginationPageSizes: [25, 50, 75],
	          paginationPageSize: 25,
	          useExternalPagination: true,
	          useExternalSorting: true,
	          appScopeProvider: this,
	          columnDefs: [
	              { name: "id" },
	              { name: "name" }
	         ],
	         onRegisterApi: function (gridApi) {
	              self.gridApi = gridApi;
	              self.gridApi.core.on.sortChanged($scope, function (grid, sortColumns) {
                });
            }
    };
    this.gridOptions.totalItems = 1;
    this.gridOptions.data = [{id: 1, name: "aa"}];
  },
  template: '<div ui-grid="$ctrl.gridOptions"></div>'
});

I attach you the plunkr: http://plnkr.co/edit/UVKLgF?p=info

@c0bra @timothyswt @PaulL1 @swalters

贡献者指南