javascript Angular UI Bootstrap modal - 使用自定义模态窗口

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/24696224/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 03:15:39  来源:igfitidea点击:

Angular UI Bootstrap modal - use custom modal window

javascriptangularjsangular-ui-bootstrapbootstrap-modal

提问by whyAto8

As given in the link http://angular-ui.github.io/bootstrap( select modal from Directive drop down on top), there is a parameter called windowTemplateUrl which is used to over ride the modal content. So, in case we are using this, what to give in templateUrl or template, as one of these is required for calling the open function of modal. For e.g. the code is given below.

正如链接http://angular-ui.github.io/bootstrap 中给出的 (从顶部的指令下拉菜单中选择模态),有一个名为 windowTemplateUrl 的参数用于覆盖模态内容。因此,如果我们正在使用它,请在 templateUrl 或模板中提供什么,因为调用 modal 的 open 函数需要其中之一。例如,代码如下。

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

If I run the code as above, it gives error that templateUrl or template is required. So, how do I use windowTemplateUrl.

如果我运行上面的代码,它会给出需要 templateUrl 或模板的错误。那么,我如何使用 windowTemplateUrl。

回答by pkozlowski.opensource

windowTemplateUrlis a template for window decoration: https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html

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

You still need to supply modal's content(using templateor templateUrl) that you would like to see decorated.

您仍然需要提供您希望看到装饰的模态内容(使用templatetemplateUrl)。

回答by FDisk

This is how windowTemplateUrl is working

这就是 windowTemplateUrl 的工作方式

$scope.open = function () {

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

Original version of angular-ui (not working)

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

Modificated version of angular-ui (working)

angular-ui 的修改版本(工作)

回答by Pavel Voronin

First, you shoulduse either basetag in you html documents or do not use relative urls.

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

Angular does not know about virtual directories so when path to you site looks like mysite.com/MySitethere is a chance of getting into troubles.

Angular 不知道虚拟目录,因此当您站点的路径看起来像mysite.com/MySite 时,就有可能遇到麻烦。

pkozlowski.opensourcehas already given you an answer. Be also aware that you can provide an id of template instead of real url if you'd like to. In that case template must be declared like this:

pkozlowski.opensource已经给了你答案。另请注意,如果您愿意,您可以提供模板的 id 而不是真实的 url。在这种情况下,模板必须像这样声明:

<script type="text/ng-template" id="TemplateId">
    ...template...
</script>