AngularJs adding a button to an ag-grid cell in a UI-router state view

问题

I asked this question, about AngularJs and ag-grid, using a cell render to place a button into a cell grid, which, when clicked, does something based on the data.

I got, and accpeted, a great answer from @MaximShoustin, but see now that there is more to it than I thought - I need my ag-grid to be in the view of a UI-router state.

So, I tried to merge Maxim's Plunker with a Plunker of my own, which shows an ag-grid in a UI-view router state and I have made this Plunker, which is not working :-(

angular.js:11598 TypeError: Cannot set property 'priceClicked' of null at priceCellRendererFunc (http://run.plnkr.co/preview/ck9ff1oft00083b63laoskhz3/controllers.js:64:36)

which is because params.$scope is null.

If I insert a line params.$scope = [];, the grid is rendered, but clicking the button does nothing.

What am I doing wrongly? Can anyone help?

I want to

add a button to an AngularJs ag-grid
which is in the view of a UI-router state

Hmm, is it necessary to add angularCompileRows to the grid options (in additon to the api = null problem)?

回答1:

Im not familiar with ag-grid but suggest you do not afraid to dive into ag-grid.js :) .

In your example, you do not provide any $scope to Grid

new agGrid.Grid(theGridDiv, $scope.grid);

After opening https://cdnjs.cloudflare.com/ajax/libs/ag-grid/3.3.3/ag-grid.js we can see that you can provide $scope to Grid constructor because in your case params.$scope = null

This is a full constructor:

Grid(eGridDiv, gridOptions, globalEventListener, $scope, $compile, quickFilterOnScope)

So I changed it to:

new agGrid.Grid(theGridDiv, $scope.grid, null, $scope, $compile, null)

Next, you need to tell to ag-grid to compile your ng-click (because CellRenderer returns string only):

$scope.grid = {
    columnDefs: columnDefs,
    angularCompileRows:true,
   //...
}

Hope it will help you :)

Working plunker

[EDIT 1]

ag-grid v23: Plunker 2

Worth to use directive ag0grid:

<div ag-grid="grid" style="height: 100%;" class="ag-fresh"></div>

It takes your scope automatically (from ag-grid/23.0.2/ag-grid-community.js):

function initialiseAgGridWithAngular1(angular) {
    var angularModule = angular.module("agGrid", []);
    angularModule.directive("agGrid", function () {
        return {
            restrict: "A",
            controller: ['$element', '$scope', '$compile', '$attrs', AngularDirectiveController],
            scope: true
        };
    });
}

[EDIT 2]

plunker without directive

<div id="gridDiv" class="ag-fresh" style="height:100%; width:100%"></div>

Be sure to add params:

var gridParams = {
        $scope: $scope,
        $compile: $compile
    };

  const theGridDiv = document.querySelector('#gridDiv');
  new agGrid.Grid(theGridDiv, $scope.grid, gridParams);

来源：https://stackoverflow.com/questions/61423793/angularjs-adding-a-button-to-an-ag-grid-cell-in-a-ui-router-state-view

标签

angularjs

angular-ui-router

ag-grid