Ng-transclude nedir?

266

StackOverflow ng-transclude tartışan bir dizi soru gördüm, ama hiçbiri layman açısından ne olduğunu açıklayan.

Belgelerdeki açıklama aşağıdaki gibidir:

Kopyalamayı kullanan en yakın üst yönergenin kopyalanmış DOM için ekleme noktasını işaretleyen yönerge.

Bu oldukça kafa karıştırıcı. Birisi ne ng-transclude'un ne yapmak istediğini ve nerede kullanılabileceğini basit bir şekilde açıklayabilir mi?

angularjs angularjs-directive transclusion

— Kod Fısıltısı
kaynak

temel olarak, belirli bir html etiketi veya yönergesi için eklediğiniz her şey için bir işaretleme noktasıdır. bir yönerge ile kullanın ve daha iyi anlayacaksınız.

— za

Yanıtlar:

492

Transclude işaretlemesinde direktif içine konur yakalama her şeyi açısal anlatmak ve bir yerde kullanmak için bir ayardır _{(aslında nerede ng-transcludeyer almaktadır)} yönerge şablonda. Bu konu hakkında daha fazla bilgiyi direktiflerin dokümantasyonuna ilişkin Diğer Unsurları Sarma Eden Direktif Oluşturma bölümünde bulabilirsiniz .

Özel bir yönerge yazarsanız, direktif şablonunda öğenin içeriğini eklemek istediğiniz noktayı işaretlemek için ng-transclude komutunu kullanırsınız

angular.module('app', [])
  .directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

Bunu işaretlemenize koyarsanız

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

Şu şekilde görünecektir:

Süpermen

Özel yönerge içindeki bilgiler

Tam örnek:

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

Görselleştir:

— Ben Fischer
kaynak

Bu, resmi belgelerinden çok daha iyi bir açıklamadır. Bu kafamı incitiyor.

— Capaj

Mükemmel cevap! :) Paylaştığınız bağlantı, sürecini anlamama yardımcı oluyor transclude.

— Paulo Oliveira

Açısal, şu anda sahip oldukları dokümanlar yerine bu açıklamayı kullanmalıdır.

— Jeremy W

@codeofnode kendi açısal derleme hizmeti, işte ilgili kod github.com/angular/angular.js/blob/…

— Ben Fischer

Stackoverflow cevaplar açısal kavramlar

— sridhar anlamak

bu bir tür verimdir, element.html () 'den gelen her şey orada oluşturulur, ancak yönerge özellikleri hala belirli bir kapsamda görünür.

— Sîrbu Nicolae-Cezar
kaynak

Tahmin ettiğim en iyi cevap mükemmel, ama eğer yakut bir arka plandan geliyorsanız, katılıyorum, yieldiyi bir benzetme gibi görünüyor.

— Apie

@Apie evet, yakut bir arka plandan geliyorum

— Sîrbu Nicolae-Cezar