Der Modale-Modus von angular-bootstrap wird trotz scheinbar korrektem Aufruf nicht angezeigt
Ich versuche zu rufen modales Dialogfeld aus einer eckigen controller. Das Beispiel ist ziemlich einfach und nicht weit von sehr trivial. Ich habe code wie
$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
});
Controlling-Funktion wird deklariert, als
var ModalChooseProjectCtrl = function($scope, $modalInstance) {
$scope.ok = function() {
$modalInstance.close($scope.chosenProject);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
};
und es wird aufgerufen, aus innerhalb einer controller-Funktion gehört, div, enthält bootstrap - navbar.
Problem: wenn ich die invoke-Funktion, dass $modal.open call, Fehler werden angezeigt
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
Diese Fehler sagen, dass die Vorlage, so zu sprechen, mut, eingewickelt in eine html-root-element, das ist obviosuly so aus Vorlage.
Außerdem werden Sie nach Aufruf sehe ich, dass folgende Elemente werden im code -
<div modal-backdrop="" class="ng-scope"></div>
<div modal-window="" index="0" animate="animate" class="ng-scope"></div>
und wenn ich auf weitere modal-Fenster angezeigt, in code. Aber Bildschirm nur springt und es passiert nichts und ich bekomme nicht mein modales Dialogfeld. Während in Plunker der aufrufende code für dialog zeigt es ganz gut (http://plnkr.co/edit/VJ1Kick7QWE3X0bL6gtw , aber es ist einfach basic-routine aufrufen.)
InformationsquelleAutor der Frage Askar Ibragimov | 2014-03-19
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dies ist ein häufiges Problem, wenn Sie keine angular-ui-Vorlagen zur Verfügung gestellt.
Aktuellen Versionen von angular-ui kommt in zwei Varianten:
ui-bootstrap.js
undui-bootstrap-tpls.js
. Müssen Sie verwenden nur Letzte.Sofern Fehler nicht über die Vorlage Ihrer Richtlinie, sondern um Vorlagen von modalBackdrop und modalWindow-Richtlinien, die einen Teil der angular-ui selbst. In der Regel, Eckige nicht finden können Vorlagen und stellen Sie eine HTTP-GET-Anfrage immer einige HTML-code, wie 404-Fehler. Und es gibt viele root-Elemente. Also das ist der Grund, warum Sie immer solche Fehler.
Überprüfen Sie den HTTP-requests beim laden der Seite.
InformationsquelleAutor der Antwort Maxim Demkin
Habe ich es behoben indem $templateCache als controller Abhängigkeit (der, der Schutzbedarf-Funktion, die Anrufe öffnen). Ich habe aber keine Idee, warum $modal können nicht aufholen, die Abhängigkeit selbst.
InformationsquelleAutor der Antwort Askar Ibragimov
Erhalten Sie diesen Fehler, wenn Sie genannt haben $templateCache.removeAll(). Ich vermute, dass die Vorlagen, die der ui.bootstrap Modul benötigt werden, gespeichert in den template-cache so löschen des cache macht Sie nicht aufzufinden.
InformationsquelleAutor der Antwort nmgeek
In meinem Fall wurden diese Fehler verursacht durch Fehler im benutzerdefinierten http-interceptor, der Griff response-Daten.
InformationsquelleAutor der Antwort beholderrk
Ich bin mit Laube für meine front-end-Abhängigkeiten gelten.
Als empfohlen, in das eckige-bootstrap-FAQ,
Änderte ich meine depenncy Injektion von
"ui.bootstrap.modal'
zu
"ui.bootstrap'
sowas :
InformationsquelleAutor der Antwort Tony
hinzufügen-ui-bootstrap-tpls-[version].min.js die Datei sollte das Problem beheben.
InformationsquelleAutor der Antwort prashant dhuri