Angular -bootstrap модальный диалог не будет отображаться, несмотря на кажущийся правильный вызов
Я пытаюсь вызвать модальный диалог из контроллера angular. Пример довольно прост и не очень прост. У меня есть код, например
$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
});
Функция управления объявляется как
var ModalChooseProjectCtrl = function($scope, $modalInstance) {
$scope.ok = function() {
$modalInstance.close($scope.chosenProject);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
};
и он вызывается из функции контроллера, которая принадлежит div, которая содержит загрузочную навигационную панель.
Проблема: при вызове функции, которая имеет этот вызов $modal.open, отображаются ошибки
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
Эти ошибки говорят, что шаблон, так сказать, может быть обернут одним корневым элементом html, который обернулся из шаблона.
Кроме того, после вызова я вижу, что в коде
появляются следующие элементы:
<div modal-backdrop="" class="ng-scope"></div>
<div modal-window="" index="0" animate="animate" class="ng-scope"></div>
и если я нажимаю дальше, в коде появляется больше модального окна. Но экран просто прыгает, и ничего не происходит, и я не получаю свой модальный диалог. В то время как в Plunker вызывающий код для диалога показывает это просто отлично (http://plnkr.co/edit/VJ1Kick7QWE3X0bL6gtw, но это просто базовая процедура вызова.)
Ответы
Ответ 1
Это обычная проблема, если у вас нет шаблонов angular -ui.
Последние версии angular -ui входят в два варианта: ui-bootstrap.js
и ui-bootstrap-tpls.js
. Вам нужно использовать только последний.
Предоставлена ошибка не о шаблоне вашей директивы, а о шаблонах modalBackdrop и modalWindow директив, которые являются частью angular -ui. Обычно Angular не может найти шаблоны и сделать HTTP-запрос GET получить код HTML, например ошибку 404. И есть много корневых элементов. Вот почему вы получаете такую ошибку.
Проверьте HTTP-запросы на загрузку страницы.
Ответ 2
Я разрешил его, включив $templateCache в качестве зависимости от контроллера (тот, который имеет функцию, которая вызывает open). Однако я не знаю, почему $modal не может догнать эту зависимость.
Ответ 3
Вы можете получить эти ошибки, если вы вызвали $templateCache.removeAll(). Я подозреваю, что шаблоны, требуемые модулем ui.bootstrap, хранятся в кеше шаблона, поэтому очистка кеша делает их незаменимыми.
Ответ 4
В моем случае эти ошибки были вызваны ошибкой в пользовательском перехватчике HTTP, который обрабатывает данные ответа.
Ответ 5
Я использую беседу для моего внешнего интерфейса.
Как указано в разделе angular -bootstrap FAQ,
Я изменил мою инъекцию
'Ui.bootstrap.modal'
в
'Ui.bootstrap'
что-то вроде этого:
angular.module('myApp', ['ui.bootstrap']).run(...
Ответ 6
добавление файла ui-bootstrap-tpls- [version].min.js должно решить проблему.