Question

不幸的是，Bootstrap的模态需要大量的div，使得html变得大而丑。

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

<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标记，因此其中的角度代码可以与我的外部控制器一起正常工作？

P.S。：我通常在大多数情况下使用AngularUI Bootstrap，但不适用于模态。我发现该技术和示例比包含常规html和调用$（“＃modal”）更丑陋和复杂.show（）因此，如果使用AngularUI值得，请告诉我如何以及为什么。

Answer 1

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

AngularJS相当于Rails渲染/ content_for？

1 个答案: