angular-bootstrap模式对话框不会显示，尽管调用看似正确

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

这些错误表明，可以说，模板必须包装在一个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的posess函数的依赖项)来解决这个问题。然而，我不知道为什么$modal本身不能赶上这种依赖。

Answer 3

如果调用了$templateCache.removeAll()，就会出现这些错误。我怀疑ui.bootstrap模块需要的模板存储在模板缓存中，因此清除缓存会使它们变得不可找到。