Question

我试图从角度控制器调用模态对话框。这个例子非常简单，距离非常简单。我有

等代码

$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的控制器函数来调用的，它包含bootstrap的导航栏。

问题：当我调用具有$ 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

这些错误说明模板，可以说，mut包含在一个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，但它只是基本的调用例程。）

Answer 1

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

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

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

Answer 2

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

Answer 3

如果您调用了 $ templateCache.removeAll（），则可能会收到这些错误。我怀疑 ui.bootstrap 模块所需的模板存储在模板缓存中，因此清除缓存会使它们无法使用。

Answer 4

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

Answer 5

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

如角度引导常见问题解答中所建议的那样，

我改变了我的依赖注入＆＃39; ui.bootstrap.modal＆＃39; 至＆＃39; ui.bootstrap＆＃39;

类似的东西：

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

Answer 6

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

尽管看似正确的呼叫，角度自举模式对话框也不会显示

6 个答案: