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

Question

我正在使用 angular ui bootstrap。我想定义一个通用的 Modal Window 来提供一些默认按钮，比如关闭、确定、标题等。

用户的模态 body 模板作为模板 url 提供。如何将用户的模态 body 模板合并到我的通用模态 window 模板中？

下面是我的通用模态 Window 模板， 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>

谢谢。

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' 已定义。

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

How do you load a dynamic template into $uibModal.open( ) ( Angular UI bootstrap)?

javascript

angularjs

angular-ui-bootstrap