twitter-bootstrap 尽管调用看似正确，但 angular-bootstrap 模式对话框不会显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22504748/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular-bootstrap modal dialog won't show despite seemingly correct call
提问by Askar Ibragimov
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.
它是从属于 div 的控制器函数中调用的，该 div 包含引导程序的导航栏。
Problem: when I invoke function that has that $modal.open call, errors are shown
问题：当我调用具有 $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
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
这些错误表明模板必须包含在一个 html 根元素中，这在模板中很明显。此外，调用后我看到以下元素出现在代码中
<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.)
如果我进一步点击，更多的模态窗口会出现在代码中。但是屏幕只是跳转而没有任何反应，我没有得到我的模态对话框。在 Plunker 中，对话框的调用代码显示它很好（http://plnkr.co/edit/VJ1Kick7QWE3X0bL6gtw，但它只是基本的调用例程。）
回答by Maxim Demkin
This is a common issue, when you have no angular-ui templates provided.
当您没有提供 angular-ui 模板时，这是一个常见问题。
Latest versions of angular-ui comes in two variants: ui-bootstrap.jsand ui-bootstrap-tpls.js. You need to use just last one.
最新版本的 angular-ui 有两种变体：ui-bootstrap.js和ui-bootstrap-tpls.js. 你只需要使用最后一个。
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.
提供的错误与您的指令模板无关，而是与作为 angular-ui 本身一部分的 modalBackdrop 和 modalWindow 指令的模板有关。通常，Angular 无法找到模板并发出 HTTP GET 请求以获取一些 HTML 代码，例如 404 错误。并且有很多根元素。这就是您收到此类错误的原因。检查页面加载时的 HTTP 请求。
回答by Askar Ibragimov
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.
我通过将 $templateCache 作为控制器依赖项（构成调用 open 的函数的那个）来解决它。但是，我不知道为什么 $modal 无法赶上该依赖项本身。
回答by nmgeek
You can get these errors if you have called $templateCache.removeAll(). I suspect the templates the ui.bootstrapmodule requires are stored in the template cache so clearing the cache makes them unfindable.
如果您调用了$templateCache.removeAll() ，则会收到这些错误。我怀疑ui.bootstrap模块所需的模板存储在模板缓存中，因此清除缓存会使它们无法找到。
回答by Tony
I'm using bower for my front-end depency.
我正在使用 bower 作为我的前端依赖。
As recommanded in the angular-bootstrap FAQ,
正如 angular-bootstrap 常见问题中的建议，
I changed my depenncy injection from 'ui.bootstrap.modal' to 'ui.bootstrap'
我将依赖注入从“ui.bootstrap.modal”更改为“ui.bootstrap”
something like that :
类似的东西：
angular.module('myApp', ['ui.bootstrap']).run(...
回答by beholderrk
In my case these errors were caused by bug in custom http interceptor that handle response data.
就我而言，这些错误是由处理响应数据的自定义 http 拦截器中的错误引起的。
回答by prashant dhuri
adding ui-bootstrap-tpls-[version].min.js file should resolve the issue.
添加 ui-bootstrap-tpls-[version].min.js 文件应该可以解决这个问题。
