O que é ng-transclude?

266

Eu já vi várias perguntas no StackOverflow discutindo a transclusão ng, mas nenhuma explicando em termos leigos o que é.

A descrição na documentação é a seguinte:

Diretiva que marca o ponto de inserção para o DOM transcluído da diretiva-pai mais próxima que usa transclusão.

Isso é bastante confuso. Alguém seria capaz de explicar em termos simples o que a ng-transclude pretende fazer e onde pode ser usada?

Code Whisperer
fonte
1
é basicamente um ponto de marcação para o que você está inserindo para a tag ou diretiva html específica. use-o com uma diretiva e você o entenderá melhor.
za

Respostas:

492

Transclude é uma configuração para dizer ao angular para capturar tudo o que é colocado dentro da diretiva na marcação e usá-lo em algum lugar (Onde realmente ng-transcludeestá) no modelo da diretiva. Leia mais sobre isso na seção Criando uma diretiva que envolve outros elementos na documentação de diretivas .

Se você escreve uma diretiva personalizada, usa ng-transclude no modelo de diretiva para marcar o ponto em que deseja inserir o conteúdo do 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>'
    };
  });

Se você colocar isso na sua marcação

<hero name="superman">Stuff inside the custom directive</hero>

Apareceria como:

Super homen

Coisas dentro da diretiva personalizada

Exemplo 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

insira a descrição da imagem aqui

Visualize:

insira a descrição da imagem aqui

Ben Fischer
fonte
90
Essa é uma descrição muito melhor do que os documentos oficiais. Aquele faz minha cabeça doer.
Capaj 21/05
4
Ótima resposta! :) O link que você compartilhou me ajudou a entender o processo de transclude.
Paulo Oliveira
10
Angular deve usar essa explicação em vez dos documentos que eles possuem atualmente.
21415 Jeremy W
1
@codeofnode serviço de compilação de seu angular, aqui está o código relevante github.com/angular/angular.js/blob/...
Ben Fischer
1
Respostas stackoverflow são melhor maneira de conceitos angulares undersatnd
sridhar ..
1

é um tipo de rendimento, tudo do element.html () é renderizado lá, mas os atributos da diretiva ainda são visíveis no escopo certo.

Sîrbu Nicolae-Cezar
fonte
3
A melhor resposta que eu acho é perfeita, mas se você vem de um fundo rubi, eu concordo, yieldparece uma boa analogia.
Apie
2
@Apie sim, eu venho de um fundo de rubi
Sîrbu Nicolae-Cezar