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

  • Breno Rises

    Breno Rises

    7 Ocak 2014
  • curioustravelers

    curioustrave

    12 AĞUSTOS 2006
  • ParryGripp

    ParryGripp

    12 AĞUSTOS 2006