AngularJS: переключение нескольких подэлементов в одну директиву Angular

Я очень новичок в Angular, но читаю довольно много. Я читал о ng-transclude на http://docs.angularjs.org/guide/directive#creating-custom-directives_demo_isolating-the-scope-of-a-directive, и я думаю, что правильно понимаю, что он делает.

Если у вас есть директива, которая применяется к элементу с содержимым внутри него, например, в

<my-directive>directive content</my-directive>

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

поэтому, если шаблон для myDirective равен <div>before</div><div ng-transclude></div><div>after</div> он будет отображаться как befored directive content after.

Это все o.k. мой вопрос в том, возможно ли каким-то образом передать более чем один блок html в мою директиву?

например.

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

<my-multipart-directive>
     <part1>content1</part1>
     <part2>content2</part2>
</my-multipart-directive>

и иметь шаблон типа:

<div>
  this: <div ng-transclude="part2"></div>
   was after that: <div ng-transclude="part1"></div>
   but now they are switched
<div>

сделать как

<div>
  this: <div ng-transclude="part2">content2</div>
   was after that: <div ng-transclude="part1">content1</div>
   but now they are switched
<div>

(думая про себя) Могу ли я каким-то образом привязать значение HTML к node к модели, чтобы я мог использовать его таким образом, не называя его "transclude"...

Спасибо

Ответ 1

Запустив Angular 1.5, теперь можно создать несколько слотов. Вместо transclude: true вы предоставляете объект с отображением каждого слота:

https://docs.angularjs.org/api/ng/directive/ngTransclude

angular.module('multiSlotTranscludeExample', [])
 .directive('pane', function(){
    return {
      restrict: 'E',
      transclude: {
        'title': '?pane-title',
        'body': 'pane-body',
        'footer': '?pane-footer'
      },
      template: '<div style="border: 1px solid black;">' +
                  '<div class="title" ng-transclude="title">Fallback Title</div>' +
                  '<div ng-transclude="body"></div>' +
                  '<div class="footer" ng-transclude="footer">Fallback Footer</div>' +
                '</div>'
    };
})

Ответ 2

Прохладный вопрос. Я не уверен, что есть встроенный способ, но вы можете сделать это самостоятельно довольно обычным способом.

Вы можете получить доступ к элементу transcluded, перейдя в службу $transclude следующим образом:

$transclude(function(clone, $scope) {

Где клоун будет копией предварительно связанного содержимого. Затем, если вы помечаете контент в элементе следующим образом:

    <div id="content">
        <div id="content0">{{text}}</div>
        <div id="content1">{{title}}</div>
    </div>

Вы можете перебрать содержимое и скомпилировать его следующим образом:

$scope.transcludes.push($compile(clone[1].children[i])($scope));

Отлично! теперь вам просто нужно разместить контент в нужном месте в вашем шаблоне

     '<div id="transclude0"></div>' +
     '<div id="transclude1"></div>' +

Затем вы можете в своей функции ссылок правильно назначить контент

angular.element(document.querySelector('#transclude' + i)).append(scope.transcludes[i]);

Я установил fiddle, который вы можете воспроизвести с помощью этой настройки.

Надеюсь, это помогло!

Ответ 3

В нашем проекте мы смоделировали многостраничную трансклюзию после JSF 2 ui: состав, ui: insert, ui: define (см. ui: composition).

Реализация состоит из трех простых директив: ui-template, ui-insert, ui-define (см. angularjs-api/template/ui-lib.js).

Чтобы определить шаблон, вы пишете следующую разметку (см. angularjs-api/template/my-page.html):

<table ui-template>
  <tr>
    <td ui-insert="menu"></td>
  </tr>
  <tr>
    <td ui-insert="content"></td>
  </tr>
</table>

и объявляет директиву (см. angularjs-api/template/my-page.js):

  var myPage = 
  {
    templateUrl: "my-page.html",
    transclude: true
  };

  angular.module("app").
    directive("myPage", function() { return myPage; });

и, наконец, для создания директивы, которую нужно написать (см. angularjs-api/template/sample.html):

<my-page>
  <div ui-define="content">
    My content
  </div>
  <div ui-define="menu">
    <a href="#file">File</a>
    <a href="#edit">Edit</a>
    <a href="#view">View</a>
  </div>
</my-page>

Рабочий образец можно увидеть через rawgit: sample.html

См. также: Переключение нескольких видов в AngularJS