请参阅https://jsfiddle.net/mawg/fu9er5cy/3/
我修改了一个令人兴奋的Plunker(因此这比证明我的问题所需的复杂一点(，并且在<div ng-controller="myController">中
我添加了<div id="myDiv">Can this be found?</div>
在myController中，我添加了：
if (document.querySelector('#myDiv') === null)
{
alert('Div not found !!');
}
else
{
alert('yay, Div found :-)');
}
通过选择"bookinfo"可以看到div，我天真地认为，当我导航到该状态的视图时，控制器的代码以及document.querySelector()将被执行。
正如您所看到的，它会立即进行评估，并表示找不到div。
正如您所看到的，从我的相关问题中，我只想在更改状态时找到div；导航到显示该视图及其控制器的状态，这样我就可以document.querySelectordiv并向其中注入ag-grid
我该怎么做？
1(您的<div id="myDiv">Can this be found?</div>存在于：中
$stateProvider.state("details", {
url: "/details",
这不是你的默认路线：$urlRouterProvider.otherwise("/")
所以让我们把它改成$urlRouterProvider.otherwise("/details")
2( 我不知道：
getID: function($timeout) {
return $timeout(function() {
console.log("value resolved")
//$scope.Company="Cognizant";
}, 1000)
}
但它会使你的路线停滞1秒。你只有在1秒后才能开始渲染视图。
所以我删除了这个代码片段。
3( 您试图在视图渲染的同一摘要周期中检查id，因此失败。要触发摘要周期或进入队列的末尾，可以添加一些零超时：
$timeout(function(){
if (document.querySelector('#myDiv') === null)
{
alert('Div not found !!');
}
else
{
alert('yaya, Div found :-)');
}
},0)
固定示例Fiddle
希望它能给你一些意见来弄清楚：(
您可以在DOM中的某个内容发生更改时运行检查，然后在找到div后删除侦听器
function func() {
if (document.querySelector('#myDiv') !== null) {
document.documentElement.removeEventListener('DOMSubtreeModified', func);
alert('yaya, Div found :-)');
}
}
document.documentElement.addEventListener('DOMSubtreeModified', func);
func();
在试图回复@Maxim时，我从头开始编码了一个Plunker。
它完全符合我的要求。
似乎每次进入路由器状态时，它的控制器都会被初始化，在初始化代码中我可以找到div
我的大得多的应用程序有问题，找不到div。所以，我会从Plunker开始，把我的应用程序一块一块地放进去，直到它开始工作。
我发布这个答案是希望它能在将来帮助到别人。这是代码：
alpha.html
<div>
<h1>Alpha</h1>
</div>
<a ui-sref="beta" ui-sref-active="beta">Beta</a>
beta.html
<div id="beta_div">
<h1>Beta</h1>
</div>
<a ui-sref="alpha" ui-sref-active="alpha">Alpha</a>
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link type="text/css" rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="application/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="application/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="application/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script type="application/javascript"
src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
<script type="application/javascript" src="app.js"></script>
<script type="application/javascript" src="controllers.js"></script>
</head>
<body ui-view></body>
</html>
app.js
angular.module('app', [
'ui.router'
]);
angular.module('app').config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/alpha');
$stateProvider.state('alpha', {
url: '/alpha',
templateUrl: './alpha.html',
controller: 'alphaController'
});
$stateProvider.state('beta', {
url: '/beta',
templateUrl: './beta.html',
controller: 'betaController'
});
}
]);
控制器.js
angular.module('app').controller('alphaController', ['$state',
function ($state) {
}
]);
angular.module('app').controller('betaController', ['$state',
function ($state) {
if (document.querySelector('#beta_div') === null) {
alert('Div not found !!');
}
else {
alert('Yay, Div found :-)');
}
}
]);