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

enter image description here

Görselleştirmek :

enter image description here

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Caroline Saquet

    Caroline Saq

    1 EKİM 2011
  • jcortes187

    jcortes187

    24 Mart 2006
  • Rockstar Games

    Rockstar Gam

    17 ŞUBAT 2006