Yönlendirme tanımının transclude seçeneğini anlıyor musunuz?

Sanırım bu, açısaljs direktifiyle anlamamın en zor konseptlerinden biri.

Http://docs.angularjs.org/guide/directive adresindeki belge şöyle diyor:

transclude - öğenin içeriğini derleyin ve yönergeye uygun hale getirin. Genellikle ngTransclude ile kullanılır. Kopyalamanın avantajı, bağlama fonksiyonunun, doğru kapsama önceden bağlanmış bir kopyalama fonksiyonunu almasıdır. Tipik bir kurulumda widget ayrı bir kapsam oluşturur, ancak ekleme işlemi bir alt öğe değil, ayrı tutma kapsamının bir kardeşidir. Bu, widget'ın özel duruma sahip olmasını ve dönüştürmenin üst (önceden izole) kapsamına bağlanmasını mümkün kılar.

• true - yönerge içeriğini kopyala.
• 'eleman' - düşük öncelikli olarak tanımlanan direktifler de dahil olmak üzere tüm öğeyi kopyalayın.

transcludeGenellikle ile kullanılır diyor ngTransclude. Ancak ngTransclude belgesinden alınan örnekte ngTranscludeyönerge kullanılmamaktadır .

Bunu anlamama yardımcı olacak bazı iyi örnekler istiyorum. Neden ihtiyacımız var? Ne çözüyor? Bu nasıl kullanılır?

Bir öğede myDirective adlı bir yönerge düşünün ve bu öğe başka bir içerik barındırıyor, diyelim ki:

<div my-directive>
    <button>some button</button>
    <a href="#">and a link</a>
</div>

Eğer myDirective bir şablon kullandığında, içeriği göreceksiniz <div my-directive>senin direktifi şablon tarafından değiştirilecektir. Yani sahip olmak:

app.directive('myDirective', function(){
    return{
        template: '<div class="something"> This is my directive content</div>'
    }
});

bu render ile sonuçlanır:

<div class="something"> This is my directive content</div> 

Orijinal öğenizin içeriğinin <div my-directive> kaybolacağına (veya daha iyi söylendiği, değiştirileceğine) dikkat edin. Bu arkadaşlara elveda deyin:

<button>some button</button>
<a href="#">and a link</a>

Peki ya sizin <button>...ve <a href>...DOM'nuzda tutmak istiyorsanız ? Transkripsiyon adı verilen bir şeye ihtiyacınız olacak. Kavram oldukça basit: İçeriği bir yerden başka bir yere ekleyin . Şimdi direktifiniz şöyle görünecek:

app.directive('myDirective', function(){
    return{
        transclude: true,
        template: '<div class="something"> This is my directive content</div> <ng-transclude></ng-transclude>'
    }
});

Bu şunları sağlayacaktır:

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>. 

Sonuç olarak, direktif kullanırken bir öğenin içeriğini korumak istediğinizde transclude kullanırsınız.

Kod örneğim burada . Ayrıca izlerken yararlanabilecek bu .

AngularJS'nin yeni sürümünde yukarıdaki davranıştaki değişikliklerden bahsetmenin önemli olduğunu düşünüyorum. Açısal 1.2.10 ile yukarıdaki sonuçlara ulaşmak için bir saat geçirdim.

Ng-transclude özellikli elemanın içeriği eklenmez, tamamen değiştirilir.

Yukarıdaki örnekte, 'transclude' ile elde edeceğiniz şey şu olacaktır:

<div class="something">
    <button>some button</button>
    <a href="#">and a link</a>
</div>

ve yok

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>

Teşekkürler.

TechExplorer'ın söylediği doğrudur, ancak ng-transclude özelliğine sahip basit bir kapsayıcı etiketi (div veya span gibi) şablonunuza ekleyerek her iki içeriğe de sahip olabilirsiniz. Bu, şablonunuzda aşağıdaki kodun tüm içeriği içermesi gerektiği anlamına gelir

<div class="something"> This is my directive content <div class="something" ng-transclude></div></div>

Wiki'den:

"Bilgisayar biliminde, aktarma, bir elektronik belgenin bir kısmının veya tamamının referans olarak bir veya daha fazla belgeye dahil edilmesidir."

Ekleme için başka bir kullanım eklemek istiyorum ve bu üst ve alt yönergelerin derleme ve bağlantı işlevlerinin yürütme sırasını değiştirir. Üst DOM belki de alt DOM'ya bağlı olduğundan, DOM DOM'u üst DOM'dan önce derlemek istediğinizde yararlı olabilir. Bu makale daha derinlemesine ilerliyor ve çok iyi anlaşılıyor!

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

Güncel angularjs 1.6.6 belgelerine şimdi daha iyi bir açıklaması var.

Transclude, Diğer Öğeleri Sarma Yönergesi Oluşturmak için Kullanılır

Bazen bir dize veya nesne yerine tüm bir şablonu geçirebilmek istenebilir. Diyelim ki bir "iletişim kutusu" bileşeni oluşturmak istiyoruz. İletişim kutusu, keyfi içeriği sarabilir.

Bunu yapmak için transclude seçeneğini kullanmamız gerekir . Aşağıdaki örneğe bakın.

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

<div ng-controller="Controller">
  <my-dialog>Check out the contents, {{name}}!</my-dialog>
</div>

my-dialog.html

<div class="alert" ng-transclude></div>

Derlenmiş Çıktı

<div ng-controller="Controller" class="ng-scope">
  <my-dialog class="ng-isolate-scope"><div class="alert" ng-transclude="">Check out the contents, Tobias!</div></my-dialog>
</div>

Transclude, bu seçeneğe sahip bir direktifin içeriğini, içeriden ziyade direktifin dışındaki kapsama erişime sahip kılar.

Bu, önceki örnekte gösterilmiştir. Script.js'de adı Jeff olarak yeniden tanımlayan bir bağlantı işlevi eklediğimize dikkat edin. Normalde {{name}} 'in Jeff olmasını bekleriz. Ancak, bu örnekte {{name}} bağlayıcısının hala Tobias olduğunu görüyoruz.

En İyi Uygulama : yalnızca transclude: truekeyfi içeriği saran bir yönerge oluşturmak istediğinizde kullanın.

transclude: true, yönergenizde tanımlanan tüm öğeyi, yönergenizin şablon öğesiyle eklemek içindir.

transclude: false ise bu öğeler son html yönergelerinize dahil edilmez, yalnızca yönerge şablonu oluşturulur.

transclude: element direktif şablonunuzun kullanılmadığı anlamına gelir sadece direktifinizde tanımlanan eleman html olarak işlenir.

direktifinizi tanımladığınızda E ile sınırlandırılmalı ve sayfaya eklediğinizde

<my-directive><elements><my-directive>
<elements> is like <p>gratitude</p>
what i am talking about.