AngularJs 在 UI-路由器状态视图中向 ag-grid 单元添加按钮

Question

我问，关于 AngularJs 和 ag-grid，使用单元格渲染将按钮放入单元格网格中，单击时，它会根据数据执行某些操作。

我得到并接受了@MaximShoustin 的一个很好的回答，但现在看到它比我想象的要多 - 我需要我的 ag-grid 在 UI- 的视图中路由器状态。

所以，我尝试合并 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，但没有成功:-(

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

这是因为 params.$scope 是 null.

如果我插入一行 params.$scope = [];，会呈现网格，但单击按钮什么也不做。

我做错了什么？有人可以帮忙吗？

我要

将按钮添加到 AngularJs ag-grid
这是在UI-router状态下的视图

嗯，是否有必要在网格选项中添加 angularCompileRows（除了 api = null 问题）？

Answer 1

我不熟悉 ag-grid 但建议您不要害怕深入 ag-grid.js :) .

在您的示例中，您没有向 Grid

提供任何 $scope

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

打开 https://cdnjs.cloudflare.com/ajax/libs/ag-grid/3.3.3/ag-grid.js 后我们可以看到您可以向 Grid 构造函数提供 $scope 因为在您的情况下 params.$scope = null

这是一个完整的构造函数：

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

所以我改成了：

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

接下来，您需要告诉 ag-grid 编译您的 ng-click（因为 CellRenderer returns 字符串）：

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

希望对您有所帮助:)

Working plunker

[编辑 1]

ag-grid v23: Plunker 2

值得使用指令ag0grid:

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

它会自动获取你的范围（来自 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
        };
    });
}

[编辑 2]

plunker without directive

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

一定要加上params:

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

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

AngularJs 在 UI-路由器状态视图中向 ag-grid 单元添加按钮

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

angularjs

angular-ui-router

ag-grid