angular-ui/ui-grid
View on GitHubUI-Grid should be $scope agnostic in on events (according to angular 1.6 components)
Open
#6,091 opened on Mar 17, 2017
help wanted
Description
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