angular-bootstrap modal dialog won't show desp

问题:

I am trying to call modal dialog from an angular controller. The example is pretty simple and not far from very trivial. I have code such as

$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 function is declared as

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

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

and it is called from withing a controller's function that belongs to div, which contains bootstrap's navbar.

Problem: when I invoke function that has that $modal.open call, errors are shown

  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

These errors say that template, so to speak, mut be wrapped in one html root element, which is obviosuly so from template. Additionally, after call I see that following elements appear in the code

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

and if I click further, more modal-window appear in code. But screen just jumps and nothing happens and I do not get my modal dialog. While in Plunker the calling code for dialog shows it just fine (http://plnkr.co/edit/VJ1Kick7QWE3X0bL6gtw , but it is just basic calling routine.)

回答1:

This is a common issue, when you have no angular-ui templates provided.

Latest versions of angular-ui comes in two variants: ui-bootstrap.js and ui-bootstrap-tpls.js. You need to use just last one.

Provided error is not about template of your directive, but about templates of modalBackdrop and modalWindow directives that are a part of angular-ui itself. Usually, Angular cannot find templates and make a HTTP GET request getting some HTML code, like 404 error. And there are many root elements. So thats the reason why you are getting such error. Check HTTP requests on page load for.

回答2:

I have resolved it by including $templateCache as controller dependency (the one that posess function that calls open). I have no idea, however, why $modal can not catch up that dependency itself.

回答3:

You can get these errors if you have called $templateCache.removeAll(). I suspect the templates the ui.bootstrap module requires are stored in the template cache so clearing the cache makes them unfindable.

回答4:

In my case these errors were caused by bug in custom http interceptor that handle response data.

回答5:

I'm using bower for my front-end depency.

As recommanded in the angular-bootstrap FAQ,

I changed my depenncy injection from 'ui.bootstrap.modal' to 'ui.bootstrap'

something like that :

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

回答6:

adding ui-bootstrap-tpls-[version].min.js file should resolve the issue.