Can Angular-UI-Grid-Edit be used with "controller as" syntax?

Question

I've written my entire Angular app managing to avoid the use of $scope, using the "controller as" syntax instead, to help ease the transition to Angular 2.0 and because I believe this is the more current practice.

But I can't figure out how to avoid using $scope with ui-grid's gridApi.edit.on.afterCellEdit event, which is documented as follows:

gridApi.edit.on.afterCellEdit(scope,function(rowEntity, colDef){})

Parameters

rowEntity – {object} – the options.data element that was edited
colDef – {object} – the column that was edited
newValue – {object} – new value
oldValue – {object} – old value

Based on the documentation I have done this, which works (after injecting $scope into the controller):

ctrl.tableOptions.onRegisterApi = function(gridApi){
  ctrl.gridApi = gridApi;
  gridApi.edit.on.afterCellEdit( $scope, function(rowEntity,colDef, newValue, oldValue) {
    //save stuff here 
  });
};

but as you can see I had to use $scope in the event's callback, otherwise I get an error telling me scope.$on is not a function. Is it possible to NOT use $scope? I tried "this" but it only seems to want $scope.

Obviously, I don't really understand what I am doing, and I can't find much documentation on afterCellEdit other than this and the example which I slavishly followed above, so I am turning to you for help. Thousands of lines of $scope-free code, it seems like a shame to fall at the last hurdle!

thanks in advance

John

Answer 1

The solution is to use null instead:

gridApi.edit.on.afterCellEdit(null,function(rowEntity, colDef, newValue, oldValue)

From there you can always access the controller through the variable you set for it e.g vm and access most of what scope would contain.