尽管看似正确的调用，但不会显示角度引导模式对话框答案

【问题标题】：angular-bootstrap modal dialog won't show despite seemingly correct call尽管看似正确的调用，但不会显示角度引导模式对话框
【发布时间】：2014-04-25 15:10:23
【问题描述】：

我正在尝试从角度控制器调用模态对话框。这个例子非常简单，而且非常简单。我有诸如

之类的代码

$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，但它只是基本的调用例程。）

【问题讨论】：

因为它适用于 Plunker；这可能是 AngularJS、BootStrap 和 UI Bootstrap 版本不兼容的问题吗？
我使用凉亭安装...我似乎有 angular 1.2 和 ng-bootstrap 0.10，来自 bootstrap 3.1.1 的 css
好像没有html2js模板，你检查了吗？

标签： javascript angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

当您没有提供 angular-ui 模板时，这是一个常见问题。

最新版本的 angular-ui 有两个变体：ui-bootstrap.js 和 ui-bootstrap-tpls.js。 您只需要使用最后一个。

提供的错误不是关于你的指令模板，而是关于 modalBackdrop 和 modalWindow 指令的模板，它们是 angular-ui 本身的一部分。通常，Angular 无法找到模板并发出 HTTP GET 请求来获取一些 HTML 代码，例如 404 错误。并且有许多根元素。这就是您收到此类错误的原因。检查页面加载时的 HTTP 请求。

【讨论】：

我的问题最终是我只包含了ui.bootstrap.modal。这没有加载模板。将其更改为ui.bootstrap 即可解决。
这正是我的问题。我正在加载 tpls 和非 tpls。所以指令在那里并正在执行，但里面什么都没有。我为这个白痴浪费了几个小时的工作哈哈！至少现在一切都会正常工作:)

【解决方案2】：

我已经通过将 $templateCache 包含为控制器依赖项（具有调用 open 的函数）来解决它。但是，我不知道为什么 $modal 本身无法赶上这种依赖关系。

【讨论】：

我一直试图找出我的模板出错的原因。终于解决了。
@redress 您只需将 $templateCache 放入注入中。这是基本的 Angular 语法 - 解释得更详细会很奇怪，因为它对任何 Angular 程序员来说都是显而易见的。

【解决方案3】：

如果你调用了$templateCache.removeAll()，你会得到这些错误。我怀疑 ui.bootstrap 模块所需的模板存储在模板缓存中，因此清除缓存会使它们无法找到。

【讨论】：

【解决方案4】：

在我的情况下，这些错误是由处理响应数据的自定义 http 拦截器中的错误引起的。

【讨论】：

您的 $http.success 回调是原因吗？你能告诉我更多吗？
我不能代表 OP。但是我对 ui.bootstrap typeahead 指令有类似的问题。我在索引应用程序上使用它，没有路由，非常简单。如果我的配置函数是空的，那么 typeahead 可以正常工作。如果我在配置阶段在 $httpProvider 上使用自定义拦截器，我会得到：指令模板'typeaheadPopup'必须只有一个根元素。

【解决方案5】：

我正在使用 bower 作为我的前端依赖。

根据 angular-bootstrap 常见问题解答中的建议，

我将依赖注入从 'ui.bootstrap.modal' 到 'ui.bootstrap'

类似的东西：

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

【讨论】：

【解决方案6】：

添加 ui-bootstrap-tpls-[version].min.js 文件应该可以解决问题。

【讨论】：