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?

angularjs angularjs-directive transclusion

— Code Whisperer
fonte

é 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

Visualize:

— Ben Fischer
fonte

Essa é uma descrição muito melhor do que os documentos oficiais. Aquele faz minha cabeça doer.

— Capaj 21/05

Ótima resposta! :) O link que você compartilhou me ajudou a entender o processo de transclude.

— Paulo Oliveira

Angular deve usar essa explicação em vez dos documentos que eles possuem atualmente.

— 21415 Jeremy W

@codeofnode serviço de compilação de seu angular, aqui está o código relevante github.com/angular/angular.js/blob/...

— Ben Fischer

Respostas stackoverflow são melhor maneira de conceitos angulares undersatnd

— sridhar ..

é 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

A melhor resposta que eu acho é perfeita, mas se você vem de um fundo rubi, eu concordo, yieldparece uma boa analogia.

— Apie

@Apie sim, eu venho de um fundo de rubi

— Sîrbu Nicolae-Cezar