AngualrJs: ag-grid in a ui-router view (templateUrl) - angularjs

Question

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.

Answer 1

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');

Answer 2

This answer has three parts:
Why DOMContentLoaded event listeners fail in controllers
Use custom directives to inject code that manipulates DOM
DEMO of ag-Grid with AngularJS
Why DOMContentLoaded event listeners fail in controllers
JavaScript libraries that manipulate the DOM need to coordinate with DOM manipulations done by the AngularJS framework.
AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.
document.addEventListener("DOMContentLoaded" is not called when I put it in the controller of the templateUrl
The AngularJS framework initializes itself after the DOMContentLoaded event. So naturally any DOMContentLoaded event listener added afterwards by a controller will miss that event.
One should use caution when mixing AngularJS with third-party libraries that manipulate the DOM.
Use custom directives to inject code that manipulates DOM
When one sees code such as document.querySelector("#myid'), replace that with a custom directive:
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
});
}
})
Usage:
<div id="myid" my-directive></div>
AngularJS directives are markers on a DOM element that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element.
When the AngularJS framework adds templates to the DOM, it parses the markup and injects code for the AngularJS directives. When it destroys DOM, it broadcasts a $destroy event on the scope associated with the element.
For more information, see
AngularJS Developer Guide - Creating Custom Directives
DEMO of ag-Grid with AngularJS
When the ag-Grid script loads, it does not register with AngularJS 1.x. This is because AngularJS 1.x is an optional part of ag-Grid and you need to tell ag-Grid you want to use it:
agGrid.initialiseAgGridWithAngular1(angular);
angular.module("example", ["agGrid"])
For more information, see
Ag-Grid Documentation - Basic AngularJS 1.x Example
The 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>