如何将动态模板加载到$uibModal.open()（Angular UI bootstrap）中？

Question

我是使用angular ui bootstrap。我想定义一个通用的模态窗口，提供一些默认按钮，例如关闭、确定和标题等。

用户的模态窗口主体模板以模板url的形式提供。我该如何将用户的模态窗口主体模板合并到我的通用模态窗口模板中呢？

下面是我的通用模态窗口模板，modal-window.tpl.html：

<div class="modal-header"><h3>{{ ctrl.headerText }}</h3></div>

<div class="modal-body">


    <<<< The user's template provided as URL should be embedded in here >>>


</div>

<div class="modal-footer">
  <button type="button" class="btn" data-ng-click="ctrl.close()"> {{ctrl.closeButtonText}} </button>
  <button class="btn btn-primary"   data-ng-click="ctrl.ok();"> {{ctrl.actionButtonText}}</button>
</div>

感谢您的选择。

- user4143172

Answer 1

您可以使用ng-include实现此操作。 如果您在控制器中将用户模板URL放在作用域中： userTemplate='users/template.html'。然后您可以这样做：

...
<div class="modal-body">
    <div ng-include="ctrl.userTemplate"></div>
</div>
...

如果您需要自定义控制器，可以像这样定义一个控制器： users/template.html:

<div ng-controller="CustomModalController as modalCtrl">
    {{modalCtrl.foo}}
</div>

唯一的缺点是此控制器需要在父控制器中定义。 在此情况下，定义了userTemplate='users/template.html' 的控制器。

- kabaehr

---

不错的解决方案，但自定义控制器怎么样？ - Magico

为这种情况编辑了我的答案。 - kabaehr

这对我的使用情况非常完美！谢谢。 - Nick Litwin