javascript - AngularJS 相当于 Rails render/content_for？

Question

不幸的是，Bootstrap 的模式需要大量的 div，使得 html 又大又难看。

因此，我尝试在 AngularJS 中构建一个模板。我基本上想要的是声明一个模态，它可以使用已经声明的 Controller ，就像这样，使用指令:

<div ng-controller="SampleController as sCtrl">
  ...
  <modal-dialog>
    <modal-title> A title Here </modal-title>
    <modal-body>

      <input type="text" ng-model="sCtrl.inputOne"/>
      {{sCtrl.someTextHere}}

    </modal-body>
    <modal-footer>
      <div ng-repeat="b in sCtrl.buttons">
        <button ng-click="sCtrl.someAction(b)"></button>
      </div>
    </modal-footer>
  </modal-dialog>
</div>

在 Rails 中，我会做类似的事情:

_modal.html.erb

<div class="modal-fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
        <div class="modal-title">
          <%= yield :modal_title %>
        </div>
      </div>
      ...
        <%= yield :modal_body %>
      ...
        <%= yield :modal_footer %>
      ...
    </div>
  </div>
</div>

my_view.html.erb

<% content_for :modal_title do %>
  A title here
<% end %>

<%= render 'modal' %>

那么，我如何在 AngularJS 中实现这一目标呢？创建嵌套指令，其中子指令将替换(或附加到)父指令的某些 html 标签，因此其中的 Angular 代码可以与我的外部 Controller 一起正常工作？

P.S.:我通常将 AngularUI Bootstrap 用于大多数事情，但不用于模态。我发现该技术和示例比包含常规 html 并调用 $("#modal").show() 更丑陋和复杂，因此，如果为此使用 AngularUI 值得，请告诉我如何以及为什么。

Answer 1

看起来像hyper-content-for可能是一个解决方案。