Transclude 'true' ve 'element' ne zaman Angular'da kullanılır?

Ne zaman transclude: 'true've ne zaman kullanmalıyım transclude: 'element'? transclude: 'element'Açısal dokümanlar hakkında hiçbir şey bulamıyorum , oldukça kafa karıştırıcı.

Birisi bunu basit bir dilde açıklayabilirse mutlu olurum. Her seçeneğin yararı nedir? Aralarındaki gerçek fark nedir?

Ben buldum budur:

transclude: true

Bir derleme işlevi içinde, transclude bağlama işlevi yardımıyla DOM'u değiştirebilir veya herhangi bir HTML etiketinde ngTransclude yönergesini kullanarak transclated DOM'yi şablona ekleyebilirsiniz.

ve

transclude: ‘element’

Bu, tüm öğeyi kopyalar ve derleme işlevine bir kopyalama bağlantısı işlevi eklenir. Kapsam henüz oluşturulmadığı için burada kapsama erişemezsiniz. Derleme işlevi, yönlendirme erişimi olan yönerge için bir bağlantı işlevi oluşturur ve transcludeFn, DOM manipülasyonu için klonlanan öğeye (aktarılan) dokunmanıza veya içindeki kapsama bağlı verileri kullanmanıza olanak tanır. Bilgileriniz için bu, ng tekrarı ve ng anahtarında kullanılır.

Gönderen Direktifleri üzerine angularjs Belgeleri :

transclude- elemanın içeriğini derlemek ve direktifin kullanımına sunmak. 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 - direktifin içeriğini aşmak.

'element' - düşük öncelikli olarak tanımlanan direktifler de dahil olmak üzere tüm öğeyi kopyalayın.

transclude: doğru

Diyelim ki şu şekilde my-transclude-truebeyan edilmiş bir direktifiniz var transclude: true:

<div>
  <my-transclude-true>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-true>
</div>

Derledikten sonra ve bağlamadan önce:

<div>
  <my-transclude-true>
    <!-- transcluded -->
  </my-transclude-true>
</div>

İçerik (çocuk) my-transclude-truehangi edilir <span>{{ something }}</span> {{..., yönerge için çapraz dahil ve kullanılabilir durumda.

transclude: 'eleman'

Şu şekilde adlandırılmış my-transclude-elementbeyan edilmiş bir direktifiniz varsa transclude: 'element':

<div>
  <my-transclude-element>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-element>
</div>

Derledikten sonra ve bağlamadan önce:

<div>
   <!-- transcluded -->
</div>

Burada, çocukları da dahil olmak üzere tüm unsur aktarılır ve direktif için kullanılabilir hale getirilir.

Bağlandıktan sonra ne olur?

Transclude işleviyle yapması gerekeni yapmak sizin direktifinize bağlıdır. kapsam değiştiğinde tüm elemanı ve çocuklarını tekrar edebilmesi için ngRepeatkullanır transclude: 'element'. Ancak, etiketi yalnızca değiştirmeniz gerekiyorsa ve içeriğini korumak istiyorsanız, bunu sizin için transclude: trueyapan ngTranscludeyönergeyle birlikte kullanabilirsiniz .

True değerine ayarlandığında, yönerge orijinal içeriği siler, ancak ng-transclude adı verilen bir yönerge aracılığıyla şablonunuzda yeniden yerleştirme için kullanılabilir hale getirir.

appModule.directive('directiveName', function() {
    return {
      template: '<div>Hello there <span ng-transclude></span></div>',
      transclude: true
    };
});


<div directive-name>world</div>

tarayıcı render: "Merhaba dünya."

Transklüzyonu düşünmenin en iyi yolu bir resim çerçevesidir. Bir resim çerçevesinin kendi tasarımı ve resmi eklemek için bir alanı vardır. İçine hangi resmin gideceğine karar verebiliriz.

Açısal söz konusu olduğunda, kapsamı ile bir tür denetleyicimiz var ve bunun içine transkripsiyonu destekleyen bir yönerge yerleştireceğiz. Bu direktifin kendi ekranı ve işlevselliği olacaktır. Aktarılmayan direktifte, direktifin içindeki içeriğe direktifin kendisi tarafından karar verilir, ancak transkripsiyonla, tıpkı bir resim çerçevesi gibi, direktifin içinde ne olacağına karar verebiliriz.

angular.module("app").directive('myFrame', function () {
    return {
        restrict: 'E',
        templateUrl:"frame.html",
        controller:function($scope){
          $scope.hidden=false;
          $scope.close=function(){
            $scope.hidden=true;

          }
        },
        transclude:true


    }

});

Direktif içindeki içerik

<div class="well" style="width:350px;" ng-hide="hidden">

  <div style="float:right;margin-top:-15px">
    <i class="glyphicon glyphicon-remove" ng-click="close()" style="cursor:pointer"></i> 
  </div>
  <div ng-transclude>
    /*frame content goes here*/
  </div>
</div>

Çağrı Yönergesi

<body ng-controller="appController">
    <my-frame>
      <span>My Frame content</span>
    </my-frame>
  </body>

Misal