尽管调用看似正确，但 angular-bootstrap 模式对话框不会显示 [英] angular-bootstrap modal dialog won't show despite seemingly correct call

问题描述

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

之类的代码

$modal.open({模板:'<div class="modal-body">选择当前项目<button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()">取消</button></div>',控制器: ModalChooseProjectCtrl});

控制函数声明为

var ModalChooseProjectCtrl = function($scope, $modalInstance) {$scope.ok = function() {$modalInstance.close($scope.chosenProject);};$scope.cancel = function() {$modalInstance.dismiss('cancel');};};

它是从属于 div 的控制器函数中调用的，其中包含引导程序的导航栏.

问题:当我调用具有 $modal.open 调用的函数时，会显示错误

 错误:[$compile:tplrt] 指令modalBackdrop"的模板必须正好有一个根元素.模板/模态/backdrop.htmlhttp://errors.angularjs.org/1.2.15-build.2378+sha.9335378/$compile/tplrt?p0=modalBackdrop&p1=template%2Fmodal%2Fbackdrop.html错误:[$compile:tplrt] 指令modalWindow"的模板必须正好有一个根元素.模板/模态/window.htmlhttp://errors.angularjs.org/1.2.15-build.2378+sha.9335378/$compile/tplrt?p0=modalWindow&p1=template%2Fmodal%2Fwindow.html

这些错误说明模板必须包含在一个 html 根元素中，这在模板中是显而易见的.此外，调用后我看到以下元素出现在代码中

 
<div modal-window="" index="0" animate="animate" class="ng-scope"></div>

如果我进一步点击，更多的模式窗口会出现在代码中.但是屏幕只是跳转而没有任何反应，我没有得到我的模态对话框.在 Plunker 中，对话框的调用代码显示得很好(http://plnkr.co/edit/VJ1Kick7QWE3X0bL6gtw ，但它只是基本的调用例程.)

解决方案

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

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

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

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.

Problem: when I invoke function that has that $modal.open call, errors are shown

  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

 <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.)

解决方案

This is a common issue, when you have no angular-ui templates provided.

Latest versions of angular-ui comes in two variants: ui-bootstrap.js and ui-bootstrap-tpls.js. You need to use just last one.

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-bootstrap 模式对话框不会显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！