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.)

18
demandé sur Askar Ibragimov 2014-03-19 15:42:49

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.

53
répondu Maxim Demkin 2014-03-19 12:52:16

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.

3
répondu Askar Ibragimov 2014-03-19 14:44:43

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.

2
répondu nmgeek 2015-09-14 18:17:20

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.

0
répondu beholderrk 2015-05-14 13:17:07

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(...
0
répondu Tony 2015-09-29 09:07:41

ajout de l'interface utilisateur-bootstrap-npt-[version].min.fichier js devrait résoudre le problème.

-1
répondu prashant dhuri 2015-07-09 22:04:35