ag-Grid中的DOMContentLoaded不会触发AngularJS

Question

我正在使用ag-Grid来填充数据表。

我可以获取该表，但行未更新，而是可以看到Loading...。

这是我的Angular代码：

agGrid.initialiseAgGridWithAngular1(angular);
var app = angular.module('project', ['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" }
];

$scope.gridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    enableFilter: true,
    enableColResize: true,
    enableSorting: true
};

document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, $scope.gridOptions);
    console.log("OUT");
    console.log("HI");
    $scope.gridOptions.api.setRowData(myDummyData);

});
});

HTML：

<div ng-controller="manageInspCtrl">
    <div id="myGrid" class="ag-dark" ag-grid="gridOptions" style="height: 400px;"></div>
</div>

我看到尝试在控制台上打印一些消息时，DOMContentLoaded函数没有被执行。

这是我的this answer。

对不起，我无法在小提琴中找到桌子，但在我的项目中我可以像下面这样：

Answer 1

嗯，就是这样。

我必须在rowData : myDummyData而不是$scope.gridOptions中设置rowData : null。

Yay Yay Yay !!!