Ng-transclude nedir?

SORU

13 Temmuz 2014, Pazar

Ng-transclude nedir?

StackOverflow üzerinde bir dizi soru ng-transclude tartışırken gördüm, ama hiçbiri sokaktaki açıklayan ne açısından.

Belgelerinde tanımı aşağıdaki gibidir:

Ekleme işaretler yönergesi transclusion kullanan en yakın üst direktifin transcluded DOM.

Bu oldukça kafa karıştırıcı. Birisi ng-transclude niyet var ve kullanılan olacağını basit bir dille açıklayabilir ki?

CEVAP

13 Temmuz 2014, Pazar

Transclude açısal biçimlendirme yönergesi içine koymak her şeyi yakalamak için söyle ve bir yerde kullanmak için bir ayardır(Aslında ng-transclude)Direktif bu şablonda. Altında bu konuda daha fazla bilgi edininDiğer Elemanları Kaydırılan bir Yönerge oluşturmadocumentation of directives bölüm.

Eğer özel bir yönerge yazarsanız Direktifi şablonda ng-transclude öğesinin içeriğini eklemek istediğiniz yeri işaretlemek için kullanın

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

Biçimlendirme bu koyarsanız

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

Gibi gözükürdü:

Superman

Özel yönergesi kıymetlidir

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