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

Question

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

我从@MaximShoustin那里得到了一个很好的答案，但是现在看到的比我想像的还多-我需要我的ag-grid必须处于UI-router状态下。

所以，我尝试将Maxim's Plunker与我自己的Plunker合并，而我已经将其shows an ag-grid in a UI-view router state制成了this Plunker，但它不起作用：-（

angular.js：11598 TypeError：无法将属性'priceClicked'设置为nullat priceCellRendererFunc（http://run.plnkr.co/preview/ck9ff1oft00083b63laoskhz3/controllers.js:64:36）

这是因为params.$scope是null。

如果插入行params.$scope = [];，则将渲染网格，但是单击按钮不会执行任何操作。

我做错了什么？谁能帮忙？

我想

• 向AngularJs ag-grid添加按钮
• 处于UI路由器状态视图中

嗯，是否有必要将angularCompileRows添加到网格选项（除了api = null问题之外？]

Answer 1

我不熟悉ag-grid，但建议您不要害怕进入ag-grid.js：）。

在您的示例中，您没有提供任何$scope至Grid

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

打开https://cdnjs.cloudflare.com/ajax/libs/ag-grid/3.3.3/ag-grid.js后，我们可以看到您可以将$scope提供给Grid构造函数，因为在您的情况下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仅返回字符串）：

$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);