angularjs - component - ¿Qué es ng-transclude?
transclusion angular 4 (2)
He visto una serie de preguntas en StackOverflow que tratan sobre ng-transclude, pero ninguna explica en términos sencillos qué es.
La descripción en la documentación es la siguiente:
Directiva que marca el punto de inserción para el DOM transcluido de la directiva principal más cercana que usa la transclusión.
Esto es bastante confuso. ¿Alguien podría explicar en términos sencillos qué pretende hacer ng-transclude y dónde podría utilizarse?
es un tipo de rendimiento, todo lo que se encuentra en element.html () se representa allí, pero los atributos de la directiva aún son visibles en el ámbito determinado.
Transclude es una configuración que le indica a angular que capture todo lo que se incluye dentro de la directiva en el marcado y que lo use en algún lugar (donde se encuentra la ng-transclude ) en la plantilla de la directiva. Lea más sobre esto en Crear una directiva que envuelve la sección Otros elementos en la documentación de las directivas .
Si escribe una directiva personalizada, use ng-transclude en la plantilla de directiva para marcar el punto donde desea insertar el contenido del elemento
angular.module(''app'', [])
.directive(''hero'', function () {
return {
restrict: ''E'',
transclude: true,
scope: { name:''@'' },
template: ''<div>'' +
''<div>{{name}}</div><br>'' +
''<div ng-transclude></div>'' +
''</div>''
};
});
Si pones esto en tu marca
<hero name="superman">Stuff inside the custom directive</hero>
Se mostraría como:
Superhombre
Cosas dentro de la directiva personalizada
Ejemplo completo:
Index.html
<body ng-app="myApp">
<div class="AAA">
<hero name="superman">Stuff inside the custom directive</hero>
</div>
</body>
jscript.js
angular.module(''myApp'', []).directive(''hero'', function () {
return {
restrict: ''E'',
transclude: true,
scope: { name:''@'' },
template: ''<div>'' +
''<div>{{name}}</div><br>'' +
''<div ng-transclude></div>'' +
''</div>''
};
});
Output markup
Visualizar:
