javascript - 尽管看似正确的调用，但不会显示 Angular Bootstrap 模式对话框

Question

我正在尝试从 Angular Controller 调用模态对话框。这个例子非常简单，而且非常简单。我有代码如

$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 的 Controller 函数中调用的，其中包含 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>

如果我进一步点击，更多的模态窗口会出现在代码中。但是屏幕只是跳跃，没有任何 react ，我没有得到我的模态对话框。在 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 请求。