Veuillez consulter https://jsfiddle.net/mawg/fu9er5cy/3/
J'ai modifié un Plunker passionnant (c'est donc un peu plus complexe que nécessaire pour démontrer mon problème), et dans <div ng-controller="myController">
J'ai ajouté <div id="myDiv">Can this be found?</div>
et dans myController , j'ai ajouté:
if (document.querySelector('#myDiv') === null)
{
alert('Div not found !!');
}
else
{
alert('yay, Div found :-)');
}
Le div peut être vu en sélectionnant "info livre" et j'ai naïvement pensé que le code du contrôleur, et, par conséquent, document.querySelector() serait exécuté lorsque je naviguais vers la vue de cet état.
Comme vous pouvez le voir, il est évalué immédiatement et indique que le div est introuvable.
Comme vous pouvez également le voir, à partir de ma question connexe , je veux seulement trouver le div lorsque je change d'état et navigue vers l'état qui montre cette vue et, par conséquent, son contrôleur, afin que je puisse document.querySelector le div et injecter un ag-grid dedans.
Comment puis je faire ça?
3 Réponses :
1) Votre <div id="myDiv">Can this be found?</div> existe dans:
$timeout(function(){
if (document.querySelector('#myDiv') === null)
{
alert('Div not found !!');
}
else
{
alert('yaya, Div found :-)');
}
},0)
et ce n'est pas votre route par défaut: $urlRouterProvider.otherwise("/")
alors changeons-le en $urlRouterProvider.otherwise("/details")
2) Je ne connais pas le golal de:
getID: function($timeout) {
return $timeout(function() {
console.log("value resolved")
//$scope.Company="Cognizant";
}, 1000)
}
mais cela bloque votre itinéraire pendant 1 seconde. Vous ne commencez à rendre la vue qu'après 1 seconde.
j'ai donc supprimé cet extrait de code.
3) Vous essayez de vérifier l'id dans le même cycle de résumé avec le rendu de vue, donc vous obtenez un échec. pour déclencher le cycle de résumé ou entrer à la fin de la file d' attente, vous pouvez ajouter un délai d'expiration nul:
$stateProvider.state("details", {
url: "/details",
exemple fixe Fiddle
J'espère que cela vous donnera quelques informations pour comprendre :)
Merci pour une réponse aussi rapide et détaillée :-) 1) Je veux pouvoir trouver un div dans n'importe quel état / vue, pas seulement la valeur par défaut 2) ouais, c'est le code de quelqu'un d'autre et non pertinent ici 3) mais cela vérifie toujours pour exister quand le Plunker est chargé et je veux vérifier la première fois que l'état est entré (peut-être à chaque fois, pour la flexibilité?)
@MawgsaysreinstateMonica vous ne pouvez pas vérifier le div dans chaque état car vous appelez le contrôle dans myController qui est global. Faites-le lors de l'appel d' run lorsque l'état est changé $stateChangeSuccess , voici le deuxième exemple: jsfiddle.net/e0yobcqg
Merci. J'ai choisi un mauvais exemple. J'avais pensé que celui-ci avait un contrôleur par état / vue, ce que mon application aura. Et je veux juste ajouter une grille dans une vue. Parce que j'ai besoin d'utiliser grid.api.SetRowData() ag-grid, j'ai besoin d'une grille dynamique, pas statique, ce qui signifie que je dois la localiser. Je suppose que j'ai besoin de faire un meilleur Plunker. Le vôtre trouve toujours le div lors du chargement du Plunker
Ok, je vous dois des excuses missives, pour ne pas avoir publié mon propre Plunker. La modification de quelqu'un d'autre a rendu les choses trop complexes, j'ai donc fait une démo minimale. J'ai également publié une réponse, qui espère que cela ne vous dérangera pas, mais il ne semble pas que vous ayez besoin des points. Hélas, la démo fonctionne comme je le voulais, mais mon application complète ne fonctionne pas. Je prévois de prendre la démo et d'y déposer mon application, morceau par morceau, et j'espère que cela fonctionnera. Merci encore pour votre aide
en essayant de répondre à @Maxim, j'ai codé un Plunker à partir de zéro.
Il fait exactement ce que je veux.
Il semble que chaque fois qu'un état de routeur est entré, son contrôleur est initialisé, et dans le code d'initialisation, je peux trouver le div.
Il y a quelque chose qui ne va pas avec mon application beaucoup plus grande, qui ne trouve pas le div. Donc, je vais commencer avec le Plunker et y déposer mon application, morceau par morceau, jusqu'à ce que je le fasse fonctionner.
Je poste cette réponse dans l'espoir qu'elle aidera quelqu'un à l'avenir. Voici le code:
alpha.html
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 :-)');
}
}
]);
beta.html
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'
});
}
]);
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
<div id="beta_div">
<h1>Beta</h1>
</div>
<a ui-sref="alpha" ui-sref-active="alpha">Alpha</a>
controllers.js
<div>
<h1>Alpha</h1>
</div>
<a ui-sref="beta" ui-sref-active="beta">Beta</a>
Vous pouvez exécuter une vérification chaque fois que quelque chose dans le DOM change, puis supprimer l'écouteur, une fois que le div est trouvé
function func() {
if (document.querySelector('#myDiv') !== null) {
document.documentElement.removeEventListener('DOMSubtreeModified', func);
alert('yaya, Div found :-)');
}
}
document.documentElement.addEventListener('DOMSubtreeModified', func);
func();