AngularJs：ui-router 视图中的 ag-grid (templateUrl)
Posted
技术标签:
【中文标题】AngularJs：ui-router 视图中的 ag-grid (templateUrl)【英文标题】：AngualrJs: ag-grid in a ui-router view (templateUrl) 【发布时间】：2020-06-13 22:57:30 【问题描述】：我有一个可以运行的应用程序，包括几个ag-grids。我决定添加ui-router，网格处于templateUrl 的状态。
代码太大，无法发布，但我有两个问题：
document.addEventListener("DOMContentLoaded" 放在 templateUrl 的控制器中时没有调用
我想当我
const currentCandidatesGridDiv = document.querySelector('#currentCandidatesGrid');
new agGrid.Grid(currentCandidatesGridDiv, Self.currentCandidatesGrid);
我发现currentCandidatesGridDiv 为空，尽管有
<div ag-grid="SearchResultController.currentCandidatesGrid"></div>
在 templateUrl 的 html 中。
同样，如果没有完整的代码，对您的帮助也不是很大，代码非常非常大。
我想我正在寻找的是一个工作代码示例、Plunk 等，以展示如何将一个简单的 ag-grid 放入 ui-router 状态的 templateUrl。
【问题讨论】：
【参考方案1】：这个答案分为三个部分：
为什么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 Developer Guide - Creating Custom Directives使用 AngularJS 的 ag-Grid 演示
当 ag-Grid 脚本加载时，它不会向 AngularJS 1.x 注册。这是因为 AngularJS 1.x 是 ag-Grid 的可选部分，你需要告诉 ag-Grid 你想使用它：
agGrid.initialiseAgGridWithAngular1(angular);
angular.module("example", ["agGrid"])
有关详细信息，请参阅
Ag-Grid Documentation - Basic AngularJS 1.x ExampleThe DEMO
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>【讨论】：
抱歉听起来很愚蠢，但这怎么能让我document.querySelector('#currentCandidatesGrid')？我需要将该结果输入new agGrid.Grid(<grid HTML element>, <grid options>)
我将提供一个赏金，试图得到一个准确的答案。感谢您迄今为止的帮助（以及其他问题）。【参考方案2】：
看起来您的实际问题是您在 id 上使用了 querySelector
#currentCandidatesGrid
# 是元素 id 的选择器
这只会匹配您的元素，如果它具有指定的 id，在您的示例中不存在。
<div ag-grid="SearchResultController.currentCandidatesGrid"></div>
应该是
<div id="currentCandidatesGrid" ag-grid="SearchResultController.currentCandidatesGrid"></div>
如果您想通过
获取该元素document.querySelector('#currentCandidatesGrid');
【讨论】：
以上是关于AngularJs：ui-router 视图中的 ag-grid (templateUrl)的主要内容，如果未能解决你的问题，请参考以下文章
不能使用带有 ui-router AngularJS 的视图使用不同的控制器
尽管ui-route和provider似乎工作正常，但我无法在angularjs中加载视图......这是一段代码