Подтвердить что ты не робот

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, но это просто базовая процедура вызова.)

4b9b3361

Ответ 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 должно решить проблему.