le Dialogue modal angular-bootstrap ne s'affiche pas malgré un appel apparemment correct
j'essaie d'appeler le dialogue modal à partir d'un contrôleur angulaire. L'exemple est assez simple et pas loin d'être triviale. J'ai un code tel que
$modal.open({
template: '<div class="modal-body">Choose current project<button class="btn btn-primary" ng-click="ok()">OK</button> <button class="btn btn-warning" ng-click="cancel()">Cancel</button></div>',
controller: ModalChooseProjectCtrl
});
la fonction de contrôle est déclarée comme
var ModalChooseProjectCtrl = function($scope, $modalInstance) {
$scope.ok = function() {
$modalInstance.close($scope.chosenProject);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
};
et il est appelé à partir de la fonction d'un contrôleur qui appartient à div, qui contient la navbar de bootstrap.
problème: quand j'invoque la fonction qui a ce $ modal.appel ouvert, les erreurs sont montre
Error: [$compile:tplrt] Template for directive 'modalBackdrop' must have exactly one root element. template/modal/backdrop.html
http://errors.angularjs.org/1.2.15-build.2378+sha.9335378/$compile/tplrt?p0=modalBackdrop&p1=template%2Fmodal%2Fbackdrop.html
Error: [$compile:tplrt] Template for directive 'modalWindow' must have exactly one root element. template/modal/window.html
http://errors.angularjs.org/1.2.15-build.2378+sha.9335378/$compile/tplrt?p0=modalWindow&p1=template%2Fmodal%2Fwindow.html
ces erreurs disent que le template, pour ainsi dire, doit être enveloppé dans un élément racine html, qui est évidemment ainsi du template. En outre, après appel je vois que les éléments suivants apparaissent dans le code
<div modal-backdrop="" class="ng-scope"></div>
<div modal-window="" index="0" animate="animate" class="ng-scope"></div>
et si je clique plus loin, plus de modal-window apparaît dans le code. Mais l'écran saute juste et rien ne se passe et je ne reçois pas mon Dialogue modal. Alors que dans Plunker le code d'appel pour la boîte de dialogue l'indique très bien (http://plnkr.co/edit/VJ1Kick7QWE3X0bL6gtw, mais c'est juste une routine d'appel basique.)
6 réponses
il s'agit d'un problème courant, lorsque vous n'avez pas de gabarits angulaires-ui fournis.
les dernières versions d'angular-ui sont disponibles en deux variantes: ui-bootstrap.js
et ui-bootstrap-tpls.js
. Vous devez utiliser juste dernier.
L'erreur fournie ne concerne pas le template de votre directive, mais les templates des directives modalBackdrop et modalWindow qui font partie de l'interface-utilisateur elle-même. Habituellement, Angular ne peut pas trouver de modèles et faire une requête HTTP GET obtenir du code HTML, comme 404 erreur. Et il y a de nombreux éléments racines. Donc c'est la raison pour laquelle vous obtenez une telle erreur. Vérifiez les requêtes HTTP sur la page load for.
Je l'ai résolu en incluant $templateCache dans la dépendance du controller (celle de la fonction posess qui appelle open). Je n'ai aucune idée, cependant, pourquoi $modal ne peut pas rattraper cette dépendance elle-même.
Vous pouvez obtenir ces erreurs, si vous l'avez appelé $ templateCache.removeAll (). Je soupçonne les modèles de la interface utilisateur.bootstrap les besoins du module sont stockés dans le cache du modèle de sorte que le nettoyage du cache les rend introuvables.
dans mon cas, ces erreurs ont été causées par un bug dans l'intercepteur http personnalisé qui traite les données de réponse.
j'utilise bower pour mon côté frontal.
comme recommandé dans la FAQ angular-bootstrap,
j'ai changé mon injection de depenncy de interface utilisateur.bootstrap.modal' de interface utilisateur.bootstrap'
quelque chose comme ça :
angular.module('myApp', ['ui.bootstrap']).run(...
ajout de l'interface utilisateur-bootstrap-npt-[version].min.fichier js devrait résoudre le problème.