angular-bootstrap modal dialog won’t show despite seemingly correct call

angular-bootstrap modal dialog won’t show despite seemingly correct call

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: ‘

‘,
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

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.)

Related:  Rails - Difference between @import and *= require?

Solutions/Answers:

Solution 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.

Solution 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.

Solution 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.

Related:  Why Bootstrap 4 choose rem and em instead px?

Solution 4:

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

Solution 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(...

Solution 6:

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

References