Entendendo a opção de transclude de definição de diretiva?

Acho que esse é um dos conceitos mais difíceis de entender com a diretiva do angularjs.

O documento de http://docs.angularjs.org/guide/directive diz:

transclude – compilar o conteúdo do elemento e torná-lo disponível para a directiva. Normalmente usado com ngTransclude. A vantagem da transclusão é que a function de vinculação recebe uma function de transclusão que é pré-vinculada ao escopo correto. Em uma configuração típica, o widget cria um escopo isolado, mas a transclusão não é um filho, mas um irmão do escopo isolado. Isso possibilita que o widget tenha um estado privado e a transclusão seja vinculada ao escopo pai (pré-isolado).

  • verdade – transcrever o conteúdo da directiva.
  • ‘elemento’ – transclui todo o elemento, incluindo quaisquer diretivas definidas com menor prioridade.

Ele diz transclude tipicamente usado com ngTransclude . Mas o exemplo do doc do ngTransclude não usa a diretiva ngTransclude .

Eu gostaria de alguns bons exemplos para me ajudar a entender isso. Por que precisamos disso? O que isso resolve? Como usá-lo?

Considere uma diretiva chamada myDirective em um elemento, e esse elemento está encerrando algum outro conteúdo, digamos:

 
and a link

Se myDirective estiver usando um modelo, você verá que o conteúdo de

será substituído por seu modelo de diretiva. Então, tendo:

 app.directive('myDirective', function(){ return{ template: '
This is my directive content
' } });

resultará na renderização:

 
This is my directive content

Observe que o conteúdo do seu elemento original

será perdido (ou melhor dito, substituído). Então, diga adeus a esses amigos:

  and a link 

Então, e se você quiser manter seu e ... no DOM? Você precisará de algo chamado transclusion. O conceito é bem simples: inclua o conteúdo de um lugar para outro . Então agora sua diretiva será algo como isto:

 app.directive('myDirective', function(){ return{ transclude: true, template: '
This is my directive content
' } });

Isso renderizaria:

 
This is my directive content and a link
.

Em conclusão, você basicamente usa transclude quando você quer preservar o conteúdo de um elemento quando você está usando uma diretiva.

Meu exemplo de código está aqui http://jsfiddle.net/7LRDS/1/ Você também pode se beneficiar assistindo: https://egghead.io/lessons/angularjs-transclusion-basics

Eu acho que é importante mencionar as mudanças no comportamento acima na nova versão do AngularJS. Passei uma hora tentando alcançar resultados acima com o Angular 1.2.10.

O conteúdo do elemento com ng-transclude não é anexado, mas completamente substituído.

Então, no exemplo acima, o que você alcançaria com ‘transclude’ seria:

 
and a link

e não

 
This is my directive content and a link

Obrigado.

O que o TechExplorer diz é verdade, mas você pode ter os dois conteúdos incluindo no seu template uma tag de container simples (como div ou span) com o atributo ng-transclude. Isso significa que o código a seguir no seu modelo deve include todo o conteúdo

 
This is my directive content

Do Wiki:

“Na ciência da computação, a transclusão é a inclusão de parte ou da totalidade de um documento eletrônico em um ou mais documentos por referência.”

Gostaria de adicionar outro uso para a transclusão, e isso é que ele altera a ordem de execução das funções de compilation e link das diretivas pai e filho. Isso pode ser útil quando você deseja compilar o DOM filho antes do DOM pai como o pai DOM talvez dependa do DOM filho. Este artigo vai mais a fundo e esclarece muito bem!

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

A documentação atualizada do AngularJS 1.6.6 agora tem uma explicação melhor.

Transclude é usado para criar uma diretiva que envolve outros elementos

Às vezes é desejável poder passar um template inteiro em vez de uma string ou um object. Digamos que queremos criar um componente “checkbox de diálogo”. A checkbox de diálogo deve conseguir envolver qualquer conteúdo arbitrário.

Para fazer isso, precisamos usar a opção transclude . Consulte o exemplo abaixo.


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

 
Check out the contents, {{name}}!

my-dialog.html

 

Saída compilada

 
Check out the contents, Tobias!

Transclude faz com que o conteúdo de uma diretiva com essa opção tenha access ao escopo fora da diretiva, e não dentro dela.

Isso é ilustrado no exemplo anterior. Observe que adicionamos uma function de link no script.js que redefine o nome como Jeff. Normalmente, esperamos que {{name}} seja Jeff. No entanto, vemos neste exemplo que a binding {{name}} ainda é Tobias.

Prática recomendada : use somente transclude: true quando você deseja criar uma diretiva que contenha conteúdo arbitrário.

transclude: true significa adicionar todos os elementos definidos na sua diretiva com o elemento template da sua diretiva.

se transclude: false estes elementos não estão incluídos no seu html final de diretiva somente modelo de diretiva é renderizado.

transclude: elemento significa que seu modelo de diretiva não é usado. O elemento definido em sua diretiva é renderizado como html.

quando você define sua diretiva, então ela deve ser restrita a E e quando você a adiciona na página, então

   is like 

gratitude

what i am talking about.