Question

如链接http://angular-ui.github.io/bootstrap中所示（从顶部的Directive下拉选择模态），有一个名为windowTemplateUrl的参数，用于覆盖模态内容。因此，如果我们使用它，在templateUrl或模板中给出什么，因为调用modal的open函数需要其中一个。对于例如代码如下。

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

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

Answer 1

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

您仍然需要提供您希望看到装饰的模态的内容（使用template或templateUrl）。

Answer 2

这就是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)

Modificated version of angular-ui (working)

Answer 3

首先，should在您的html文档中使用base标记，或者不使用相对网址。

Angular不了解虚拟目录，所以当你的网站路径看起来像 mysite.com/MySite 时，有可能遇到麻烦。

pkozlowski.opensource 已经给你一个答案。还要注意，如果您愿意，可以提供模板ID而不是真实网址。在这种情况下，模板必须声明如下：

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

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

3 个答案: