angularjs - personalizadas - ¿Cuándo usar transcluir ''verdadero'' y transcluir ''elemento'' en Angular?

ng if ejemplos

Question

¿Cuándo debería usar transclude: ''true'' y when transclude: ''element'' ? No puedo encontrar nada sobre transclude: ''element'' en los documentos angulares, son bastante confusos.

Me encantaría que alguien pudiera explicar esto en un lenguaje simple. ¿Cuál es el beneficio de cada opción? ¿Cuál es la verdadera diferencia entre ellos?

Esto es lo que he encontrado:

transclude: true

Dentro de una función de compilación, puede manipular el DOM con la ayuda de la función de enlace transcluido o puede insertar el DOM transcluido en la plantilla utilizando la directiva ngTransclude en cualquier etiqueta HTML.

y

transclude: ‘element’

Esto transcluye el elemento completo y se introduce una función de vinculación de transcluido en la función de compilación. No puede tener acceso al ámbito aquí porque aún no se ha creado el alcance. La función de compilación crea una función de enlace para la directiva que tiene acceso al alcance y transcludeFn le permite tocar el elemento clonado (que fue transcluido) para la manipulación DOM o hacer uso de datos vinculados al alcance en el mismo. Para su información, esto se usa en ng-repeat y ng-switch.

Answer 1

Cuando se establece en verdadero, la directiva eliminará el contenido original, pero lo hará disponible para la reinserción dentro de su plantilla a través de una directiva llamada ng-transclude.

appModule.directive(''directiveName'', function() {
return {
template: ''<div>Hello there <span ng-transclude></span></div>'',
transclude: true
};
});
<div directive-name>world</div>

navegador render: "Hola, mundo".

Answer 2

De AngularJS Documentation on Directives :

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).

true - transcluye el contenido de la directiva.

''element'' : transcluye el elemento completo, incluidas las directivas definidas con una prioridad más baja.

transcluir: verdadero

Entonces digamos que tienes una directiva llamada my-transclude-true declarada con transclude: true que se ve así:

<div>
<my-transclude-true>
<span>{{ something }}</span>
{{ otherThing }}
</my-transclude-true>
</div>

Después de compilar y antes de vincular esto se convierte en:

<div>
<my-transclude-true>
<!-- transcluded -->
</my-transclude-true>
</div>

El contenido (hijos) de my-transclude-true que es <span>{{ something }}</span> {{... , está transcluido y está disponible para la directiva.

transclude: ''elemento''

Si tiene una directiva llamada my-transclude-element declarada con transclude: ''element'' que se ve así:

<div>
<my-transclude-element>
<span>{{ something }}</span>
{{ otherThing }}
</my-transclude-element>
</div>

Después de compilar y antes de vincular esto se convierte en:

<div>
<!-- transcluded -->
</div>

Aquí, todo el elemento, incluidos sus hijos, se transcluye y se pone a disposición de la directiva.

¿Qué sucede después del enlace?

Depende de su directiva hacer lo que tiene que hacer con la función de transcluir. ngRepeat usa transclude: ''element'' para que pueda repetir todo el elemento y sus elementos ngRepeat cuando cambia el alcance. Sin embargo, si solo necesita reemplazar la etiqueta y desea conservar su contenido, puede usar transclude: true con la directiva ngTransclude que hace esto por usted.

Answer 3

La mejor manera de pensar sobre la transclusión es un Marco de imagen. Un marco de imagen tiene su propio diseño y un espacio para agregar la imagen. Podemos decidir qué imagen irá dentro de ella.

Cuando se trata de angular tenemos algún tipo de controlador con su alcance y dentro de eso vamos a colocar una directiva que apoye la transclusión. Esta directiva tendrá su propia pantalla y funcionalidad. En la directiva no translúcida, el contenido dentro de la directiva lo decide la directiva en sí, pero con la transclusión, al igual que un marco, podemos decidir qué se incluirá en la directiva.

angular.module("app").directive(''myFrame'', function () {
return {
restrict: ''E'',
templateUrl:"frame.html",
controller:function($scope){
$scope.hidden=false;
$scope.close=function(){
$scope.hidden=true;
}
},
transclude:true
}
});

Contenido dentro de la directiva

<div class="well" style="width:350px;" ng-hide="hidden">
<div style="float:right;margin-top:-15px">
<i class="glyphicon glyphicon-remove" ng-click="close()" style="cursor:pointer"></i>
</div>
<div ng-transclude>
/*frame content goes here*/
</div>
</div>

Directiva de llamada

<body ng-controller="appController">
<my-frame>
<span>My Frame content</span>
</my-frame>
</body>

Example