SORU
8 Mart 2013, Cuma


Nasıl `transclude anlamak` Direktifi tanımı?

Bu bana angularjs talimatı ile anlamak için zor bir kavram biri olduğunu düşünüyorum.

http://docs.angularjs.org/guide/directive gelen belge diyor ki:

transclude- elemanın içeriği derleme ve yönergesi kullanılabilir hale getirmek. Genellikle ngTransclude ile kullanılır. Transclusion avantajı bağlama işlevi önceden bağlı kapsamı doğru olan transclusion bir işlevi alır. Tipik bir kurulum widget bir kapsam izole oluşturur, ama transclusion bir çocuk değil, ama bir kardeş kapsam izole. Bu widget özel durumu (pre-izole) üst kapsam tabi olacaktır transclusion olmasını sağlar.

  • gerçek direktifin içeriği transclude. <>'element' - herhangi bir Direktif daha düşük öncelikte tanımlı dahil olmak üzere tüm öğe transclude. lit

transclude genellikle ngTransclude ile kullanılır yazıyor. Ama ngTransclude doktor örnek 8* *Direktif hiç kullanmıyor.

Bazı iyi örnekler bana bu anlamanıza yardımcı olmak istiyorum. Neden ihtiyacımız var? Bunu çözmek nedir? Nasıl kullanılır?

CEVAP
8 Mart 2013, Cuma


Bir Direktif olarak adlandırılan göz önünde bulundurunmyDirectivebir öğe ve bu öğenin başka bir içeriği kapsayan, şöyle diyelim:

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

EğermyDirectivebir şablon kullanarak, <div my-directive> içeriği Direktifi şablon yerini olacağını göreceksiniz. Bu yüzden sahip:

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

bu hale neden olur:

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

Orijinal element içeriği 13* *dikkat edinkaybolacaktır(veya daha iyi, yerini söyledi). Yani, bu arkadaşları veda:

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

Bu yüzden, eğer DOM ** 15 ve <a href>... tutmak için ne yapmalı? Bir şey transclusion aradı gerekir. Kavramı oldukça basittir:Başka bir yerden içerik vardır. Şimdi sizin göreviniz bu gibi bir şey olacaktır:

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

Bu hale getirecektir:

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

Sonuç olarak, bir Direktif kullanırken bir öğesi içeriğini korumak istediğinizde temelde transclude kullanın.

Benim kod örneği burada http://jsfiddle.net/7LRDS/1/ Ayrıca izlerken yararlanabilecek: https://egghead.io/lessons/angularjs-transclusion-basics

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

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Austin Evans

    Austin Evans

    5 AĞUSTOS 2007
  • MrOctopi

    MrOctopi

    6 Aralık 2010
  • soyacincautv

    soyacincautv

    14 NİSAN 2010