javascript - tabset - ui bootstrap 4

El diálogo modal angular-bootstrap no se mostrará a pesar de una llamada aparentemente correcta

Question

Estoy tratando de llamar al diálogo modal desde un controlador angular. El ejemplo es bastante simple y no está lejos de ser muy trivial. Tengo codigo tal como

$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 función de control se declara como

var ModalChooseProjectCtrl = function($scope, $modalInstance) { 
         $scope.ok = function() {
        $modalInstance.close($scope.chosenProject);
    };

    $scope.cancel = function() {
        $modalInstance.dismiss(''cancel'');
    };
};

y se llama desde dentro de la función de un controlador que pertenece a div, que contiene la barra de navegación de bootstrap.

Problema: cuando invoco la función que tiene esa llamada $ modal.open, se muestran los errores

  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

Estos errores dicen que la plantilla, por así decirlo, debe estar envuelta en un elemento raíz html, lo que obviamente se debe a la plantilla. Además, después de la llamada veo que aparecen los siguientes elementos en el código

 <div modal-backdrop="" class="ng-scope"></div>
 <div modal-window="" index="0" animate="animate" class="ng-scope"></div>

y si hago clic en más, aparecerá una ventana más modal en el código. Pero la pantalla solo salta y no pasa nada y no aparece el diálogo modal. Mientras que en Plunker, el código de llamada para el diálogo lo muestra bien ( http://plnkr.co/edit/VJ1Kick7QWE3X0bL6gtw , pero es una rutina de llamada básica).

Answer 1

En mi caso, estos errores fueron causados ​​por un error en el interceptor http personalizado que maneja los datos de respuesta.

Answer 2

Este es un problema común, cuando no se proporcionan plantillas de interfaz de usuario angular.

Las últimas versiones de angular-ui vienen en dos variantes: ui-bootstrap.js y ui-bootstrap-tpls.js . Necesitas usar solo el último.

El error provisto no se refiere a la plantilla de su directiva, sino a las plantillas de las directivas modalBackdrop y modalWindow que forman parte de la propia interfaz de usuario angular. Por lo general, Angular no puede encontrar plantillas y hacer una solicitud HTTP GET para obtener algún código HTML, como el error 404. Y hay muchos elementos raíz. Así que esa es la razón por la que está recibiendo tal error. Compruebe las solicitudes HTTP en la carga de la página para.

Answer 3

Estoy usando Bower para mi dependencia de front-end.

Como se recomienda en las preguntas frecuentes de angular-bootstrap,

Cambié mi inyección de alcohol de ''ui.bootstrap.modal'' a ''ui.bootstrap''

algo como eso :

angular.module(''myApp'', [''ui.bootstrap'']).run(...

Answer 4

Lo he resuelto al incluir $ templateCache como dependencia del controlador (la función que posee llamada que se abre). Sin embargo, no tengo idea de por qué $ modal no puede ponerse al día con esa dependencia.

Answer 5

Puede obtener estos errores si ha llamado a $ templateCache.removeAll () . Sospecho que las plantillas que requiere el módulo ui.bootstrap están almacenadas en la memoria caché de la plantilla, por lo que al borrar la memoria caché las hace que no se puedan encontrar.

Answer 6

agregar el archivo ui-bootstrap-tpls- [versión] .min.js debería resolver el problema.