Cannot read property '$apply' of null when set angularCompileRows to true

Question

I use AngularJS 1.7 and ag-grid 18.0.1.

When I set angularCompileRows to true, I have this error in the console:

Uncaught TypeError: Cannot read property '$apply' of null
at eval (rowRenderer.js:586)

This is the code corresponding (this is agGrid code):

RowRenderer.prototype.checkAngularCompile = function () {
    var _this = this;
    // if we are doing angular compiling, then do digest the scope here
    if (this.gridOptionsWrapper.isAngularCompileRows()) {
        // we do it in a timeout, in case we are already in an apply
        setTimeout(function () {
            _this.$scope.$apply();
        }, 0);
    }
};

Here my options:

const gridOptions = {
            rowData: null,
            columnDefs: [...],
            enableColResize: true,
            onColumnResized: (params) => {
            angularCompileRows: true,
            suppressCellSelection: true,
            enableSorting: true,
            enableServerSideSorting: true,
            rowModelType: 'infinite',
            pagination: true,
            paginationPageSize: 10,
            unSortIcon: true,
            suppressPaginationPanel: true,
            suppressHorizontalScroll: true,
            onGridReady: (params) => {
                const dataSource = {
                    rowCount: null, // behave as infinite scroll
                    getRows: (rowsParams) => {
                        // call my API then rowsParams.successCallback(data, isLastPage);
                    },
                };

                gridOptions.api.setDatasource(dataSource);
            },
        };

The call stack

And the output of the debug option

The grid is rendering: headers are okay, but the content is empty.

Plunker https://plnkr.co/edit/j5ubZWit4CO5zmldgqnl?p=preview based on this exemple https://www.ag-grid.com/javascript-grid-infinite-scrolling/#example-2-equal-pagination-page-size-and-large-infinite-block-si and add angularCompileRows: true to options

EDIT: Here a plunker with an angular app https://plnkr.co/edit/7eOKSXbcCzLdYWtPygrS?p=preview

The error is not fired but the angularCompileRows do not seem to be called

@AlekseySolovey the code with $scope.$apply is the agGrid code, it's not mine — EloHailwidis
The problem is likely caused by something earlier in the code stack. Examine the entire call stack to determine the origin of the problem. — georgeawg
@georgeawg I've had a screenshot of the call stack, if that help. Currently tring to debug it ;) — EloHailwidis
the Plunker you provided is not an angularjs app, could you provide your angularjs app that producing the error? — Peter Wilson
@PeterWilson i've added a plunker (see my edit). Sorry for this mistake... In my project I'm sure I use an angularjs app, and I have still this error... I don't know how to reproduce it. — EloHailwidis

Axar Axar · Accepted Answer · 2018-06-28T15:18:23

If you're going to use angular with the grid, why not load angular first :). You're not loading angular and you are not using any angular code in the grid, how is it suppose to call $scope.$apply() without that?

Make angularCompileRows = false and your grid works. If you're going to use angular, start with an angular example.

Cannot read property '$apply' of null when set angularCompileRows to true

1 Answers