link - template directive angularjs

AngularJS opcional ng-transclude

Question

He escrito una directiva personalizada llamada ''noticias'' en AngularJS 1.5.

Su diseño es el siguiente:

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

El archivo JavaScript de esta directiva es el siguiente:

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

Como ve, mi directiva de noticias tiene dos hijos, llamados encabezados y campos de contenido. Se puede utilizar de la siguiente manera:

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

Hasta ahora, la directiva funciona bien. Quiero decir, siempre que las secciones de encabezado y contenido estén llenas de contenido, la directiva las muestra como se espera. Sin embargo, estoy tratando de hacer que estos espacios de transclusión no sean obligatorios. Siempre que uso la directiva como:

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

AngularJS lanza un error que dice que no he llenado el espacio de contenido. ¿Es posible hacer estas ranuras opcionales?

Answer 1

Realmente no puedo encontrar dónde está en la documentación real , pero en base a un ejemplo que vi, ¿creo que puedes usar un ? antes del valor para hacer la ranura opcional.

Ejemplo:

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

Esto viene del ejemplo en documentos angulares en https://docs.angularjs.org/api/ng/directive/ngTransclude#multi-slot-transclusion . Está en la app.js.

También puede agregar un valor predeterminado para los casos en los que la ranura es opcional, haciendo algo como esto:

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

Edición : en realidad lo encontré en la documentación. Dice en esta sección https://docs.angularjs.org/api/ng/service/$compile#transclusion :

Si el selector de elementos tiene el prefijo a ? entonces esa ranura es opcional. Por ejemplo, el objeto transclude { slotA: ''?myCustomElement'' } asigna elementos <my-custom-element> a la ranura slotA , a los que se puede acceder mediante la función $transclude o mediante la directiva ngTransclude .