AngularJS опционально ng-transclude

Я написал пользовательскую директиву под названием "news" в AngularJS 1.5.

Он выглядит следующим образом:

<div class="row">
    <div class="largeText shadow1" ng-transclude="heading"></div>
    <div class="mediumText shadow2" ng-transclude="content"></div>
</div>

Файл JavaScript этой директивы выглядит следующим образом:

return {           
    restrict: 'E',
    transclude: {
      'heading': 'heading',
      'content': 'content'
    },
    scope: {
        //Some parameters here
    },
    templateUrl: '/directives/news.html'
};

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

<news>
    <heading>
        //Any content goes here
    </heading>
    <content>
        //Any content goes here
    </content>
</news>

Пока директива работает нормально. Я имею в виду, что до тех пор, пока разделы заголовка и содержимого заполняются некоторым контентом, директива показывает их как ожидалось. Тем не менее, я пытаюсь сделать эти отсеки для перехвата не обязательными. Всякий раз, когда я использую директиву как:

<news>
    <heading></heading>
</news>

AngularJS выдает сообщение о том, что я не заполнил слот для контента. Возможно ли сделать эти слоты дополнительными?

Ответы

Ответ 1

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

Пример:

transclude: {
  'heading': 'heading',
  'content': '?content'
}

Это происходит из примера в документах angular https://docs.angularjs.org/api/ng/directive/ngTransclude#multi-slot-transclusion. Он находится в app.js.

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

<div class="largeText shadow1" ng-transclude="heading">Default stuff for the slot goes here</div>


Изменить: на самом деле я нашел его в документации. В этом разделе говорится https://docs.angularjs.org/api/ng/service/$compile#transclusion:

Если селектор элементов имеет префикс с ?, тогда этот интервал является необязательным. Например, объект transclude { slotA: '?myCustomElement' } отображает элементы <my-custom-element> в слот slotA, к которому можно получить доступ через функцию $transclude или через директиву ngTransclude.