AngularJs：ui-router 视图中的 ag-grid (templateUrl)
AngualrJs: ag-grid in a ui-router view (templateUrl)
我有一个可用的应用程序，包括一些 ag-grids。我决定添加 ui-router，网格处于 templateUrl 状态。
代码是 mcuh 大到 post，但我有两个问题：
document.addEventListener("DOMContentLoaded" 当我把它放在 templateUrl 我想我可以通过将随附的逻辑移动到 $transitions.onSuccess({ entering: 'search_result' }, function (transition)、BUT[=40= 来解决这个问题], 当我
const currentCandidatesGridDiv = document.querySelector('#currentCandidatesGrid');
new agGrid.Grid(currentCandidatesGridDiv, Self.currentCandidatesGrid);
我发现 currentCandidatesGridDiv 为空，尽管有
<div ag-grid="SearchResultController.currentCandidatesGrid"></div>
在 templateUrl 的 HTML 中。
同样，如果没有完整的代码，它对你没有太大帮助，它非常非常大。
我想我正在寻找的是工作代码示例、Plunk 等，以展示如何将简单的 ag-grid 放入 ui-router 状态的 templateUrl。
这个答案分为三个部分：
- 为什么
DOMContentLoaded 事件侦听器在控制器中失败
- 使用自定义指令注入操纵 DOM
的代码
- 带有AngularJS
的农业网格演示
为什么 DOMContentLoaded 事件侦听器在控制器中失败
JavaScript 操作 DOM 的库需要与 AngularJS 框架完成的 DOM 操作相协调。
AngularJS 通过提供自己的事件处理循环来修改正常的 JavaScript 流程。这将 JavaScript 分为经典和 AngularJS 执行上下文。只有在 AngularJS 执行上下文中应用的操作才能受益于 AngularJS 数据绑定、异常处理、属性 监视等
document.addEventListener("DOMContentLoaded" is not called when I put it in the controller of the 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
});
}
})
用法：
<div id="myid" my-directive></div>
AngularJS 指令是 DOM 元素上的标记，它告诉 AngularJS 的 HTML 编译器（$compile）将指定的行为附加到 DOM 元素。
当 AngularJS 框架将模板添加到 DOM 时，它会解析标记并为 AngularJS 指令注入代码。当它销毁 DOM 时，它会在与元素关联的范围内广播一个 $destroy 事件。
有关详细信息，请参阅
带有AngularJS
的农业网格演示
加载 ag-Grid 脚本时，它不会向 AngularJS 1.x 注册。这是因为 AngularJS 1.x 是 ag-Grid 的可选部分，您需要告诉 ag-Grid 您要使用它：
agGrid.initialiseAgGridWithAngular1(angular);
angular.module("example", ["agGrid"])
有关详细信息，请参阅
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>
看起来你的实际问题是你在 id
上使用了 querySelector
#currentCandidatesGrid
# 是元素 id 的选择器
这只会匹配您的元素，如果它具有指定的 ID，而在您的示例中该 ID 不存在。
<div ag-grid="SearchResultController.currentCandidatesGrid"></div>
需要
<div id="currentCandidatesGrid" ag-grid="SearchResultController.currentCandidatesGrid"></div>
如果您想通过
获取该元素
document.querySelector('#currentCandidatesGrid');
我有一个可用的应用程序，包括一些 ag-grids。我决定添加 ui-router，网格处于 templateUrl 状态。
代码是 mcuh 大到 post，但我有两个问题：
document.addEventListener("DOMContentLoaded"当我把它放在 templateUrl 的控制器中时没有被调用
我想我可以通过将随附的逻辑移动到
$transitions.onSuccess({ entering: 'search_result' }, function (transition)、BUT[=40= 来解决这个问题], 当我const currentCandidatesGridDiv = document.querySelector('#currentCandidatesGrid'); new agGrid.Grid(currentCandidatesGridDiv, Self.currentCandidatesGrid);
我发现 currentCandidatesGridDiv 为空，尽管有
<div ag-grid="SearchResultController.currentCandidatesGrid"></div>
在 templateUrl 的 HTML 中。
同样，如果没有完整的代码，它对你没有太大帮助，它非常非常大。
我想我正在寻找的是工作代码示例、Plunk 等，以展示如何将简单的 ag-grid 放入 ui-router 状态的 templateUrl。
这个答案分为三个部分：
- 为什么
DOMContentLoaded事件侦听器在控制器中失败 - 使用自定义指令注入操纵 DOM 的代码
- 带有AngularJS 的农业网格演示
为什么 DOMContentLoaded 事件侦听器在控制器中失败
JavaScript 操作 DOM 的库需要与 AngularJS 框架完成的 DOM 操作相协调。
AngularJS 通过提供自己的事件处理循环来修改正常的 JavaScript 流程。这将 JavaScript 分为经典和 AngularJS 执行上下文。只有在 AngularJS 执行上下文中应用的操作才能受益于 AngularJS 数据绑定、异常处理、属性 监视等
document.addEventListener("DOMContentLoaded"is not called when I put it in the controller of the 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
});
}
})
用法：
<div id="myid" my-directive></div>
AngularJS 指令是 DOM 元素上的标记，它告诉 AngularJS 的 HTML 编译器（$compile）将指定的行为附加到 DOM 元素。
当 AngularJS 框架将模板添加到 DOM 时，它会解析标记并为 AngularJS 指令注入代码。当它销毁 DOM 时，它会在与元素关联的范围内广播一个 $destroy 事件。
有关详细信息，请参阅
带有AngularJS
的农业网格演示加载 ag-Grid 脚本时，它不会向 AngularJS 1.x 注册。这是因为 AngularJS 1.x 是 ag-Grid 的可选部分，您需要告诉 ag-Grid 您要使用它：
agGrid.initialiseAgGridWithAngular1(angular);
angular.module("example", ["agGrid"])
有关详细信息，请参阅
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>
看起来你的实际问题是你在 id
上使用了 querySelector#currentCandidatesGrid
# 是元素 id 的选择器
这只会匹配您的元素，如果它具有指定的 ID，而在您的示例中该 ID 不存在。
<div ag-grid="SearchResultController.currentCandidatesGrid"></div>
需要
<div id="currentCandidatesGrid" ag-grid="SearchResultController.currentCandidatesGrid"></div>
如果您想通过
获取该元素document.querySelector('#currentCandidatesGrid');