这个答案分为三个部分：
- 为什么
DOMContentLoaded 事件侦听器在控制器中失败
- 使用自定义指令注入操作 DOM 的代码
- 使用 AngularJS 的 ag-Grid 演示
为什么 DOMContentLoaded 事件侦听器在控制器中失败
操作 DOM 的 JavaScript 库需要与 AngularJS 框架完成的 DOM 操作相协调。
AngularJS 通过提供自己的事件处理循环来修改正常的 JavaScript 流程。这将 JavaScript 拆分为经典和 AngularJS 执行上下文。只有在 AngularJS 执行上下文中应用的操作才能受益于 AngularJS 数据绑定、异常处理、属性监视等。
document.addEventListener("DOMContentLoaded"在templateUrl的控制器中没有被调用
AngularJS 框架在DOMContentLoaded 事件之后初始化自己。因此，控制器之后添加的任何DOMContentLoaded 事件侦听器自然都会错过该事件。
在将 AngularJS 与操纵 DOM 的第三方库混合使用时应谨慎。
使用自定义指令注入操作 DOM 的代码
当看到document.querySelector("#myid') 之类的代码时，将其替换为自定义指令：
app.directive("myDirective", function() {
return {
link: postLink
};
function postLink(scope, elem, attrs) {
//DOM initialization here
//e.g. initialize(elem);
scope.$on('$destroy', function() {
//DOM teardown code here
});
}
})
用法：
<div id="myid" my-directive></div>
AngularJS 指令是 DOM 元素上的标记，它告诉 AngularJS 的 HTML 编译器 ($compile) 将指定的行为附加到该 DOM 元素。
当 AngularJS 框架向 DOM 添加模板时，它会解析标记并为 AngularJS 指令注入代码。当它销毁 DOM 时，它会在与元素关联的范围内广播 $destroy 事件。
有关详细信息，请参阅
使用 AngularJS 的 ag-Grid 演示
当 ag-Grid 脚本加载时，它不会向 AngularJS 1.x 注册。这是因为 AngularJS 1.x 是 ag-Grid 的可选部分，你需要告诉 ag-Grid 你想使用它：
agGrid.initialiseAgGridWithAngular1(angular);
angular.module("example", ["agGrid"])
有关详细信息，请参阅
agGrid.initialiseAgGridWithAngular1(angular);
angular.module("example", ["agGrid"])
.controller("exampleCtrl", function($scope) {
var columnDefs = [
{headerName: "Make", field: "make"},
{headerName: "Model", field: "model"},
{headerName: "Price", field: "price"}
];
var rowData = [
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000}
];
$scope.gridOptions = {
columnDefs: columnDefs,
rowData: rowData
};
})
html, body {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
position: absolute;
top: 0;
left: 0;
padding: 0;
overflow: auto;
}
body {
padding: 1rem;
overflow: auto;
}
<script src="//unpkg.com/angular/angular.js"></script>
<script src='//unpkg.com/@ag-grid-community/all-modules/dist/ag-grid-community.min.js'>
</script>
<body ng-app="example" ng-controller="exampleCtrl" style="height: 100%">
<div ag-grid="gridOptions" class="ag-theme-balham" style="height: 100%;">
</div>
</body>