一尘不染

尽管看似正确的调用,但仍然不会显示angular-bootstrap模态对话框

angularjs

我正在尝试从角度控制器调用模式对话框。这个例子很简单,而且非常简单。我有这样的代码

$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的控制器函数调用,该函数包含引导程序的导航栏。

问题:当我调用具有该$ 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,但这只是基本的调用例程。)


阅读 157

收藏
2020-07-04

共1个答案

一尘不染

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

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

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

2020-07-04