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

问题描述

我想从一个角度控制器调用模态对话框。这个例子是pretty简单和很琐碎不远。我有code，如

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
    });

控制函数声明为

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

    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    };
};

和它是从withing属于div的控制器的功能，它包含引导的导航栏调用。

and it is called from withing a controller's function that belongs to div, which contains bootstrap's navbar.

问题：当我调用具有了$ 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根元素，这是obviosuly所以从模板。
此外，通话后，我看到以下内容出现在code

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>

和如果我点击更多，更多的模态窗口出现在code。不过屏幕正跳跃，并没有任何反应，我没有得到我的模态对话框。虽然Plunker调用code的对话框显示它只是罚款（ http://plnkr.co/edit/VJ1Kick7QWE3X0bL6gtw ，但它仅仅是基本的呼叫程序。）

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.

角UI的最新版本有两个变种： UI-bootstrap.js 和 UI的引导-tpls.js 。 您只需要使用最后一个。

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

所提供的错误不是关于你的指令的模板，但大约modalBackdrop和modalWindow指令是角UI本身的一部分的模板。通常，角找不到模板，使HTTP GET请求得到一些HTML code，像404错误。而且有很多的根元素。所以，这就是为什么你得到这样的错误的原因。
检查页面加载的HTTP请求。​​

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.

这篇关于角引导模式对话框不会显示，尽管看似正确的调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！