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

Posted 2023-03-28

【中文标题】AngularJs 在 UI 路由器状态视图中向 ag-grid 单元格添加按钮

【英文标题】：AngularJs adding a button to an ag-grid cell in a UI-router state view

【发布时间】：2020-08-08 22:29:12

【问题描述】：

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

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

所以，我尝试将 Maxim's Plunker 与我自己的 Plunker 合并，shows an ag-grid in a UI-view router state 和我已经创建了 this Plunker，但它不起作用:-(

angular.js:11598 TypeError: 无法设置属性“priceClicked”为空 按价格CellRendererFunc (http://run.plnkr.co/preview/ck9ff1oft00083b63laoskhz3/controllers.js:64:36)

这是因为params.$scope 是null。

如果我插入一行params.$scope = [];，则会呈现网格，但单击该按钮不会执行任何操作。

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

我想要

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

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

【参考方案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 后，我们可以看到您可以将$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-gridv23：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);