Angular UI引导模态——使用自定义模态窗口

Angular UI Bootstrap modal - use custom modal window

本文关键字：模态 自定义 窗口 UI Angular      更新时间：2023-09-26

如链接http://angular-ui.github.io/bootstrap所示(从顶部的指令下拉菜单中选择模态)，有一个名为windowTemplateUrl的参数用于覆盖模态内容。所以，如果我们使用这个，在templateUrl或template中给出什么，因为其中一个是调用modal的open函数所必需的。例如，代码如下:

$scope.open = function(){
  var modalInstance = $modal.open({
      windowTemplateUrl : '/client/content.html'
  })
}

如果我像上面那样运行代码，它会给出一个错误，认为需要templateUrl或template。那么，我如何使用windowTemplateUrl。

windowTemplateUrl是一个窗口装饰模板: https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html

您仍然需要提供modal的内容(使用template或templateUrl)，您希望看到装饰。

这是windowTemplateUrl的工作方式

$scope.open = function () {
var modalInstance = $modal.open({
  templateUrl:'myModalContent.html',
  windowTemplateUrl: 'customModal.html',
  controller: 'ModalInstanceCtrl',
  resolve: {
  params: function(){
     return {
        title: 'Custom title 2'
           };
         }
      }
   });
};

angular-ui的原始版本(不工作)

angular-ui (working)的修改版本

首先，您应该在html文档中使用base标记或不使用相对url。

Angular不知道虚拟目录，所以当你的站点路径看起来像mysite.com/MySite时，就有可能出现问题。

pkozlowski。开源已经给了你一个答案。也要注意，如果你愿意，你可以提供一个模板的id而不是真实的url。在这种情况下，模板必须这样声明:

<script type="text/ng-template" id="TemplateId">
    ...template...
</script>
相关文章：