ag-Grid 在 AngularJS 中不起作用

Question

我正在尝试使用 ag-Grid 获取数据表。 我没有使用任何 npm 或 bower 进行安装。

我所要做的就是在 index.html 中包含相同的链接和脚本标签。 但它似乎不起作用。

依赖注入给我抛出了如下错误：

Error: $injector:modulerrModule Error

我创建了一个fiddle。

谁能帮我解决这个问题，或者让我知道我缺少什么。

下面是代码：

var app = angular.module('project1', ["agGrid"]);
app.controller('manageInspCtrl', function($scope) {
var columnDefs = [{
headerName: "<input type=checkbox>Select All",
field: "Select",
width: 120,
cellRenderer: function(params) {
  var htmlElement = document.createElement("input");
  htmlElement.type = 'checkbox';
  return htmlElement;
}
}, {
headerName: "Postal Code",
field: "pc",
width: 120
}, {
headerName: "Zone Name",
field: "zn",
width: 120
}, {
headerName: "Sector Name",
field: "sn",
width: 120
}, {
headerName: "Branch Code",
field: "bc",
width: 120
}, {
headerName: "Branch Name",
field: "bn",
width: 120
}, {
headerName: "Branch Address",
field: "ba",
width: 120
}, {
headerName: "Towncouncil name",
field: "tcn",
width: 120
}, {
headerName: "Towncouncil Address",
field: "tca",
width: 120
}, {
headerName: "Phase Name",
field: "pn",
width: 120
}];
var myDummyData = [{
pc: "400001",
zn: "Zone - 1",
sn: "Sector - 1",
bc: "AMK-1",
bn: "Ang Mo Kio BO",
ba: "Block-109, Ang Mo Kio, Singapore",
tcn: "Ang Mo Kio Towncouncil",
tca: "Block-110, Ang Mo Kio Street, Singapore",
pn: "Phase - 1"
}, {
pc: "400001",
zn: "Zone - 1",
sn: "Sector - 1",
bc: "AMK-1",
bn: "Ang Mo Kio BO",
ba: "Block-109, Ang Mo Kio, Singapore",
tcn: "Ang Mo Kio Towncouncil",
tca: "Block-110, Ang Mo Kio Street, Singapore",
pn: "Phase - 1"
}, {
pc: "400001",
zn: "Zone - 1",
sn: "Sector - 1",
bc: "AMK-1",
bn: "Ang Mo Kio BO",
ba: "Block-109, Ang Mo Kio, Singapore",
tcn: "Ang Mo Kio Towncouncil",
tca: "Block-110, Ang Mo Kio Street, Singapore",
pn: "Phase - 1"
}, {
pc: "400001",
zn: "Zone - 1",
sn: "Sector - 1",
bc: "AMK-1",
bn: "Ang Mo Kio BO",
ba: "Block-109, Ang Mo Kio, Singapore",
tcn: "Ang Mo Kio Towncouncil",
tca: "Block-110, Ang Mo Kio Street, Singapore",
pn: "Phase - 1"
}, {
pc: "400001",
zn: "Zone - 1",
sn: "Sector - 1",
bc: "AMK-1",
bn: "Ang Mo Kio BO",
ba: "Block-109, Ang Mo Kio, Singapore",
tcn: "Ang Mo Kio Towncouncil",
tca: "Block-110, Ang Mo Kio Street, Singapore",
pn: "Phase - 1"
}, {
pc: "400001",
zn: "Zone - 1",
sn: "Sector - 1",
bc: "AMK-1",
bn: "Ang Mo Kio BO",
ba: "Block-109, Ang Mo Kio, Singapore",
tcn: "Ang Mo Kio Towncouncil",
tca: "Block-110, Ang Mo Kio Street, Singapore",
pn: "Phase - 1"
}, {
pc: "400001",
zn: "Zone - 1",
sn: "Sector - 1",
bc: "AMK-1",
bn: "Ang Mo Kio BO",
ba: "Block-109, Ang Mo Kio, Singapore",
tcn: "Ang Mo Kio Towncouncil",
tca: "Block-110, Ang Mo Kio Street, Singapore",
pn: "Phase - 1"
}, {
pc: "400001",
zn: "Zone - 1",
sn: "Sector - 1",
bc: "AMK-1",
bn: "Ang Mo Kio BO",
ba: "Block-109, Ang Mo Kio, Singapore",
tcn: "Ang Mo Kio Towncouncil",
tca: "Block-110, Ang Mo Kio Street, Singapore",
pn: "Phase - 1"
}, {
pc: "400001",
zn: "Zone - 1",
sn: "Sector - 1",
bc: "AMK-1",
bn: "Ang Mo Kio BO",
ba: "Block-109, Ang Mo Kio, Singapore",
tcn: "Ang Mo Kio Towncouncil",
tca: "Block-110, Ang Mo Kio Street, Singapore",
pn: "Phase - 1"
}, {
pc: "400001",
zn: "Zone - 1",
sn: "Sector - 1",
bc: "AMK-1",
bn: "Ang Mo Kio BO",
ba: "Block-109, Ang Mo Kio, Singapore",
tcn: "Ang Mo Kio Towncouncil",
tca: "Block-110, Ang Mo Kio Street, Singapore",
pn: "Phase - 1"
}];

var gridOptions = {
columnDefs: columnDefs,
rowData: null,
enableFilter: true,
enableColResize: true,
enableSorting: true
};

document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
gridOptions.api.setRowData(myDummyData);

});
});

提前致谢。

Answer 1

Angular 1.x 的 documentation 表示“像这样将 ag-Grid 作为模块的依赖项包含在内”：

    // get ag-Grid to create an Angular module and register the ag-Grid directive
    agGrid.initialiseAgGridWithAngular1(angular);
    // create your module with ag-Grid as a dependency
    var module = angular.module("example", ["agGrid"]);

也许是上面缺少的“初始化”？