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
.