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({ enter: '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 为空，尽管有

I find that currentCandidatesGridDiv is null, despite having

<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-router 状态的 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 的选择器

# is a selector for an element 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屋！