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

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的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

这些错误说模板,可以这么说,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请求.