Angularjs AngualrJs:ui路由器视图中的ag网格（templateUrl）

我有一个可用的应用程序，包括一些

aggrid

s。我决定添加

ui路由器

，网格位于状态的

templateUrl

中

代码太大，无法发布，但我有两个问题：

• document.addEventListener（“DOMContentLoaded”

  在我将其放入templateUrl的控制器时未被调用
• 我想我可以通过将封闭的逻辑移动到

  $transitions.onSuccess（{输入：'search\u result'}，函数（transition）

  ，中来解决这个问题，但是当我

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

我发现

currentCandidatesGridDiv

为null，尽管

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

在模板URL的HTML中

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

---

我想我要找的是一个工作代码示例、Plunk等，以展示如何将简单的ag网格放入ui路由器状态的templateUrl中。

这个答案有三个部分：

• 为什么

  DOMContentLoaded

  事件侦听器在控制器中失败
• 使用自定义指令插入操作DOM的代码
• 使用AngularJS演示ag网格

---

为什么

DOMContentLoaded

事件侦听器在控制器中失败 操纵DOM的JavaScript库需要与AngularJS框架完成的DOM操纵相协调

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

document.addEventListener（“DOMContentLoaded”

在我将其放入templateUrl的控制器时未被调用

AngularJS框架在

DOMContentLoaded

事件之后进行自身初始化。因此，控制器随后添加的任何

DOMContentLoaded

事件侦听器自然都将错过该事件

在将AngularJS与操纵DOM的第三方库混合时，应该谨慎

---

使用自定义指令插入操作DOM的代码 当您看到诸如

document.querySelector（“#myid'）

之类的代码时，请将其替换为自定义指令：

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

用法： 有关详细信息，请参阅

agGrid.initialiseAgGridWithAngular1（角度）；
angular.module（“示例”，[“agGrid”]）
.controller（“exampleCtrl”，函数（$scope）{
var columnDefs=[
{headerName:“Make”，字段：“Make”}，
{headerName:“Model”，字段：“Model”}，
{标题名称：“价格”，字段：“价格”}
];
变量行数据=[
{品牌：“丰田”，型号：“Celica”，价格：35000}，
{品牌：“福特”，型号：“蒙迪欧”，价格：32000}，
{品牌：“保时捷”，型号：“Boxter”，价格：72000}
];
$scope.gridOptions={
columnDefs:columnDefs，
rowData:rowData
};
})

html，正文{
身高：100%；
宽度：100%；
保证金：0；
框大小：边框框；
-webkit溢出滚动：触摸；
}
html{
位置：绝对位置；
排名：0；
左：0；
填充：0；
溢出：自动；
}
身体{
填充：1rem；
溢出：自动；
}

---

这个答案有三个部分：

• 为什么

  DOMContentLoaded

  事件侦听器在控制器中失败
• 使用自定义指令插入操作DOM的代码
• 使用AngularJS演示ag网格

---

为什么

DOMContentLoaded

事件侦听器在控制器中失败 操纵DOM的JavaScript库需要与AngularJS框架完成的DOM操纵相协调

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

document.addEventListener（“DOMContentLoaded”

在我将其放入templateUrl的控制器时未被调用

AngularJS框架在

DOMContentLoaded

事件之后进行自身初始化。因此，控制器随后添加的任何

DOMContentLoaded

事件侦听器自然都将错过该事件

在将AngularJS与操纵DOM的第三方库混合时，应该谨慎

---

使用自定义指令插入操作DOM的代码 当您看到诸如

document.querySelector（“#myid'）

之类的代码时，请将其替换为自定义指令：

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

用法： 有关详细信息，请参阅

agGrid.initialiseAgGridWithAngular1（角度）；
angular.module（“示例”，[“agGrid”]）
.controller（“exampleCtrl”，函数（$scope）{
var columnDefs=[
{headerName:“Make”，字段：“Make”}，
{headerName:“Model”，字段：“Model”}，
{标题名称：“价格”，字段：“价格”}
];
变量行数据=[
{品牌：“丰田”，型号：“Celica”，价格：35000}，
{品牌：“福特”，型号：“蒙迪欧”，价格：32000}，
{品牌：“保时捷”，型号：“Boxter”，价格：72000}
];
$scope.gridOptions={
columnDefs:columnDefs，
rowData:rowData
};
})

html，正文{
身高：100%；
宽度：100%；
保证金：0；
框大小：边框框；
-webkit溢出滚动：触摸；
}
html{
位置：绝对位置；
排名：0；
左：0；
填充：0；
溢出：自动；
}
身体{
填充：1rem；
溢出：自动；
}

---

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

#现任候选人

agGrid.initialiseAgGridWithAngular1(angular);

angular.module("example", ["agGrid"])

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

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