Search code examples
angularjsangular-ui-routerag-grid

AngualrJs: ag-grid in a ui-router view (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" 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);

I find that currentCandidatesGridDiv is null, despite having

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

in the HTML of the templateUrl.

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

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.

Solution

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

    #currentCandidatesGrid

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

    Would need to be

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

    if you want to get that element via 

    document.querySelector('#currentCandidatesGrid');