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

[danicomas]

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

[danicomas]

I have detected that the problem is in this restriction (

ui-grid/src/js/core/factories/GridApi.js

Line 254 in 3b12b5c

if ( scope !== null && typeof(scope.$on) === 'undefined' ){

) because you need to remove the listeners in:

scope.$on('$destroy', function() {
                removeListener();
              });

In this case we should find another solution to remove the listeners. @c0bra @timothyswt @PaulL1 @swalters. If we solve this issue I think that we will have a good way to do a bridge between angularjs and @angular2.

[scrayWC]

I am having the same issue and was wondering if a fix or solution has been created. The app I am working on requires me to access the paginationChanged function which is only available to me if I were to add an onRegisterApi object to my gridOptions in the table. I need to access the paginationChanged function so that I can change the height of the grid with the pageSize amount changes. Does any one know of another way to do this?

[maychine-fatima]

I have thz same problem with gridApi doesnt work to me did u find a qolution to the scope

[scrayWC]

Yes, I did find a solution to this. In order to access pagination I had to pass the onRegisterApi function my controller. Here is my code to use as an example.
onRegisterApi: function ($ctrl){
$ctrl.pagination.on.paginationChanged(null, function(newPage, pageSize){