AngualrJs：ui-router视图中的ag-grid（templateUrl）

Question

我有一个正在运行的应用，其中包括几个ag-grid。我决定添加ui-router，并将网格置于状态的templateUrl中。

代码很大，要发布，但是我有两个问题：

• [document.addEventListener("DOMContentLoaded"当我将其放在templateUrl的控制器中时未调用

• 我想我可以通过将包含的逻辑移到$transitions.onSuccess({ entering: 'search_result' }, function (transition)，BUT中来解决这个问题，当我

  const currentCandidatesGridDiv = document.querySelector('#currentCandidatesGrid');
  new agGrid.Grid(currentCandidatesGridDiv, Self.currentCandidatesGrid);
  

尽管发现currentCandidatesGridDiv为空，但具有

<div ag-grid="SearchResultController.currentCandidatesGrid"></div>

在templateUrl的HTML中。

同样，如果没有完整的代码，这对您没有太大帮助，这非常大。

[我想我正在寻找的是工作代码示例，Plunk等，以展示如何将简单的ag-grid放入ui路由器状态的templateUrl。

Answer 1

操纵DOM的JavaScript库需要与AngularJS框架完成的DOM操纵相协调。

AngularJS通过提供其自己的事件处理循环来修改常规JavaScript流。这将JavaScript分为经典和AngularJS执行上下文。只有在AngularJS执行上下文中应用的操作才能受益于AngularJS数据绑定，异常处理，属性监视等。

[document.addEventListener("DOMContentLoaded"当我将其放在templateUrl的控制器中时未调用

AngularJS框架在DOMContentLoaded事件中此后初始化自身。因此，控制器随后添加的任何DOMContentLoaded事件侦听器自然都会错过该事件。

[将AngularJS与操纵DOM的第三方库混合使用时应格外小心。