angularjs - crear - directivas angular 6

¿Comprender la opción de transcluir de la definición de directiva?

Question

Creo que este es uno de los conceptos más difíciles de entender para la directiva de angularjs.

El documento de http://docs.angularjs.org/guide/directive dice:

transclude : compila el contenido del elemento y lo pone a disposición de la directiva. Normalmente se usa con ngTransclude. La ventaja de la transclusión es que la función de enlace recibe una función de transclusión que está predeterminada al alcance correcto. En una configuración típica, el widget crea un ámbito aislado, pero la transclusión no es un elemento secundario, sino un elemento secundario del ámbito aislado. Esto hace posible que el widget tenga un estado privado, y la transclusión se vincule al alcance principal (preaislante).

• cierto - transcluye el contenido de la directiva.
• ''elemento'': transcluye el elemento completo, incluidas las directivas definidas con una prioridad más baja.

Dice transclude típicamente usado con ngTransclude . Pero la muestra del documento de ngTransclude no utiliza la directiva ngTransclude en absoluto.

Me gustaría algunos buenos ejemplos para ayudarme a entender esto. ¿Por qué lo necesitamos? ¿Qué soluciona? ¿Cómo usarlo?

Answer 1

Considere una directiva llamada myDirective en un elemento, y ese elemento está adjuntando otro contenido, digamos:

<div my-directive>
    <button>some button</button>
    <a href="#">and a link</a>
</div>

Si myDirective usa una plantilla, verá que el contenido de <div my-directive> será reemplazado por su plantilla de directiva. Entonces teniendo:

app.directive(''myDirective'', function(){
    return{
        template: ''<div class="something"> This is my directive content</div>''
    }
});

dará como resultado este render:

<div class="something"> This is my directive content</div> 

Tenga en cuenta que el contenido de su elemento original <div my-directive> se perderá (o mejor dicho, se reemplazará). Entonces, despídase de estos amigos:

<button>some button</button>
<a href="#">and a link</a>

Entonces, ¿qué <a href>... si quieres mantener tu <button>... y <a href>... en el DOM? Necesitarás algo llamado transclusión. El concepto es bastante simple: incluye el contenido de un lugar a otro . Así que ahora su directiva se verá más o menos así:

app.directive(''myDirective'', function(){
    return{
        transclude: true,
        template: ''<div class="something"> This is my directive content</div> <ng-transclude></ng-transclude>''
    }
});

Esto representaría:

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>. 

En conclusión, básicamente utiliza transcluir cuando desea conservar el contenido de un elemento cuando usa una directiva.

El ejemplo de mi código está aquí http://jsfiddle.net/7LRDS/1/ También podría beneficiarse al mirar: https://egghead.io/lessons/angularjs-transclusion-basics

Answer 2

Creo que es importante mencionar los cambios en el comportamiento anterior en la nueva versión de AngularJS. Pasé una hora tratando de alcanzar los resultados anteriores con Angular 1.2.10.

El contenido del elemento con ng-transclude no se anexa sino que se reemplaza por completo.

Entonces, en el ejemplo anterior, lo que lograrías con ''transclude'' sería:

<div class="something">
    <button>some button</button>
    <a href="#">and a link</a>
</div>

y no

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>

Gracias.

Answer 3

De Wiki:

"En informática, la transclusión es la inclusión de una parte o la totalidad de un documento electrónico en uno o más documentos por referencia".

Me gustaría agregar otro uso para la transclusión, y es que cambia el orden de ejecución de las funciones de compilación y enlace de las directivas padre e hijo. Esto puede ser útil cuando desee compilar el DOM hijo antes de que el DOM principal como el DOM principal dependa quizás del DOM hijo. ¡Este artículo profundiza más y lo aclara muy bien!

http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives-part-2-transclusion/

Answer 4

La documentación actualizada de AngularJS 1.6.6 ahora tiene una mejor explicación.

Transclude se usa para crear una directiva que envuelve otros elementos

A veces es deseable poder pasar una plantilla completa en lugar de una cadena o un objeto. Digamos que queremos crear un componente de "cuadro de diálogo". El cuadro de diálogo debe ser capaz de envolver cualquier contenido arbitrario.

Para hacer esto, necesitamos usar la opción transclude . Consulte el ejemplo a continuación.

script.js

angular.module(''docsTransclusionExample'', [])
.controller(''Controller'', [''$scope'', function($scope) {
  $scope.name = ''Tobias'';
}])
.directive(''myDialog'', function() {
  return {
    restrict: ''E'',
    transclude: true,
    scope: {},
    templateUrl: ''my-dialog.html'',
    link: function(scope) {
      scope.name = ''Jeff'';
    }
  };
});

index.html

<div ng-controller="Controller">
  <my-dialog>Check out the contents, {{name}}!</my-dialog>
</div>

my-dialog.html

<div class="alert" ng-transclude></div>

Salida compilada

<div ng-controller="Controller" class="ng-scope">
  <my-dialog class="ng-isolate-scope"><div class="alert" ng-transclude="">Check out the contents, Tobias!</div></my-dialog>
</div>

Transclude hace que el contenido de una directiva con esta opción tenga acceso al alcance fuera de la directiva en lugar de dentro.

Esto se ilustra en el ejemplo anterior. Tenga en cuenta que hemos agregado una función de enlace en script.js que redefine el nombre como Jeff. Por lo general, esperaríamos que {{name}} fuera Jeff. Sin embargo, vemos en este ejemplo que el enlace {{name}} sigue siendo Tobias.

Mejores prácticas : solo use transclude: true cuando quiera crear una directiva que envuelva contenido arbitrario.

Answer 5

Lo que dice TechExplorer es cierto, pero puede tener ambos contenidos al incluir en su plantilla una etiqueta de contenedor simple (como div o span) con el atributo ng-transclude. Esto significa que el siguiente código en su plantilla debe incluir todo el contenido

<div class="something"> This is my directive content <div class="something" ng-transclude></div></div>

Answer 6

transclude: verdadero significado para agregar todo el elemento que está definido en su directiva con el elemento de plantilla de su directiva.

if transclude: false estos elementos no están incluidos en su html final de directiva, solo se procesa la plantilla de la directiva.

transclude: elemento significa que su plantilla de directiva no se usa, solo el elemento definido en su directiva se representa como html.

cuando defines tu directiva, entonces debes restringirla a E y cuando la agregas en la página,

<my-directive><elements><my-directive>
<elements> is like <p>gratitude</p>
what i am talking about.