AngularJS эквивалентно Rails render / content_for?

0

К сожалению, Bootstrap modal требует огромного количества 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 родительской директивы, и поэтому угловой код внутри него отлично работает с моим внешним контроллером?

PS: Обычно я использую AngularUI Bootstrap для большинства вещей, но не для модальных. Я нашел технику и примеры более уродливыми и сложными, чем включение обычного html и вызова $ ("# modal"). Show() Итак, если для этого стоит использовать AngularUI, пожалуйста, покажите мне, как и почему.

  • 0
    Используете ли вы встроенный атрибут scope когда впервые объявляете свою директиву? Тогда вы можете просто передать такие вещи, как title, как атрибут директивы. Если бы вы могли показать свою функцию app.directive это было бы тоже здорово.
  • 0
    объем? да, я использую ... но я не могу делать то, что я собираюсь. Показывать мой код бессмысленно, поскольку я понятия не имею, что использовать. я думал об использовании transclude, но я не знаю, как использовать несколько нг transclude
Теги:
angularjs-directive

1 ответ

1
Лучший ответ

Похоже, что гипер-контент- может быть решением.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню