Angular - использовать шаблон в качестве контейнера для нескольких шаблонов

Question

Вот быстрый вопрос:

Возможно ли иметь шаблон, в котором у вас есть несколько шаблонов, и вызывать тот, который вам нужен, когда вам это нужно?

Позвольте мне объяснить это немного лучше:

У меня есть модал, который я называю так:

$scope.showErrorModal = ->
    errorModal = $ionicPopup.show(
      title: 'Issues list'
      scope: $scope
      templateUrl: './sections/modal/modal.tpl.html'
      buttons: [{text: 'Close',type: 'button-assertive'}
      ])
    errorModal.then (res) ->
      console.log 'tapped!', res
      return
    return

Как вы можете видеть, я использую внешний шаблон.

Проблема в том, что таким образом мне нужно создавать разные шаблоны каждый раз, когда нужно изменить мой мод.

Что я хотел бы сделать (если это возможно), так это возможность создавать различные суб-шаблоны внутри modal.tpl.html и назовите их в правильном модале.

Вот пример кода:

modal.tpl.html:

<div id="error-template">
// here the error-modal stuff
</div>

<div id="success-template">
// here the success-modal stuff
</div>

и из контроллера, назовите их так, например:

$scope.showErrorModal = ->
        errorModal = $ionicPopup.show(
          title: 'Issues list'
          scope: $scope
          templateUrl: './sections/modal/modal.tpl.html#error-template' //Just to make it clear that i want to use only one part of that file
          buttons: [{text: 'Close',type: 'button-assertive'}
          ])
        errorModal.then (res) ->
          console.log 'tapped!', res
          return
        return

Это чистая выдумка или это возможно? Есть ли другие решения для решения этого типа проблем?

Answer 1

Кроме уменьшения количества сетевых запросов, я не вижу никакой реальной пользы в том, что вы упомянули в вопросе. Вы можете использовать несколько модальных директив (errorModal, successModel и т. Д.) В любом случае, чтобы лучше разделить ваш код.

Если вы хотите уменьшить сетевые запросы, существует служба $ templateCache, которая позволяет предварительно загружать шаблоны с первым запросом, например, так:

<script type="text/ng-template" id="templateId.html">
  <p>This is the content of the template</p>
</script>

Возможно, вы также захотите взглянуть на угловой UI-маршрутизатор, который представляет собой альтернативную реализацию маршрутизатора, которая позволяет легче использовать вложенные и основные шаблоны.