AngualrJs:ui-router视图中的ag-grid(templateUrl) [英] AngualrJs: ag-grid in a ui-router view (templateUrl)

问题描述

我有一个正在运行的应用程序，其中包括一些 ag-grid .我决定添加 ui-router ，并在状态的 templateUrl 中添加网格.

I had a working app, including a few ag-grids. I decided to add ui-router, with the grids in the templateUrl of a state.

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

The code is mcuh to large to post, but I have two problems:

将
• document.addEventListener("DOMContentLoaded" 放到templateUrl的控制器中不会被调用

• 我想我可以通过将封闭的逻辑移到 $ transitions.onSuccess({input:'search_result'}，function(transition)， 但是 ，当我

• document.addEventListener("DOMContentLoaded" is not called when I put it in the controller of the templateUrl

• I guess that I can get round that by moving the enclosed logic into $transitions.onSuccess({ entering: 'search_result' }, function (transition), BUT, when I

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

我发现 currentCandidatesGridDiv 为空，尽管有

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

在templateUrl的HTML中.

in the HTML of the templateUrl.

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

Again, not much help to you without full code, which is very, very large.

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

I guess that what I am looking for is a working code sample, Plunk, etc to show how to put a simple ag-grid into a ui-router state's templateUrl.

推荐答案

您的实际问题似乎是您在id上使用querySelector

It looks like your actual problem is that you are using a querySelector on the id

#currentCandidatesGrid

#currentCandidatesGrid

#是元素ID的选择器

仅当元素具有指定的ID(在您的示例中不存在)时，它才会与您的元素匹配.

This would only match your element if it had that specified id, which in your example does not exist.

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

需要成为

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

如果您想通过

document.querySelector('#currentCandidatesGrid');

这篇关于AngualrJs:ui-router视图中的ag-grid(templateUrl)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！