AngularJS - Динамическое использование частичных частиц внутри других частиц

Я относительно новичок в AngularJS и хотел бы знать, насколько это возможно, чтобы вытащить частичные шаблоны динамически. Рассмотрим этот абстрагированный (и упрощенный для этого примера) модуль. Это само по себе будет частичным шаблоном, который будет использоваться повторно во всем приложении.

Разметка частичного модуля

<div class="module">
    <h2 class="module-title">{{module.title}}</h2>

    <div class="module-content">
        {{module.content}}
    </div>

</div>

После получения некоторой клиентской части данных я могу пожелать, чтобы module.content была простой строкой текста, без проблем. Что было бы полезно, если бы я мог динамически вставлять другие частичные шаблоны в module.content на основе данных, с которыми я работаю. Скажем, например, в моем ответе у меня есть список заголовков, которые я хочу отобразить, можно ли вытащить частичный шаблон, который обрабатывает заголовки? И в другом месте module.content может быть частичным шаблоном, который обрабатывает галерею изображений.

Приветствуется любой ввод или направление!

Ответ 1

Есть несколько подходов, доступных вам.

Лучше всего добавить свой собственный directive. Расширение в вашем примере:

module.directive('myModule', function() {
  return {
    restrict: 'A',
    scope : {
      title : '@'
    },
    templateUrl : '/partial/module.html',
    transclude : true
  };
});

Мы будем использовать переход, чтобы сделать содержимое более гибким. Теперь частичное:

<div class="module">
  <h2 class="module-title">{{title}}</h2>

  <div class="module-content" ng-transclude></div>
</div>

С помощью этой директивы вы можете использовать следующий HTML-код:

<div my-module title="{{module.title}}">
  {{module.content}}
</div>

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

<div ng-include="module.partialUrl"></div>

В приведенном выше случае Angular будет прервать частичное по URL-адресу в $scope.module.partialUrl. (Edit: это означает, что вы можете динамически заменять пользовательские интерфейсы, заменяя переменную области видимости, используемую ngInclude. Удивительно, правильно?)

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

<div ng-include="'/partial/foo.html'"></div>