Yönerge tanımının "değiştir" i nasıl kullanılır?


81

Bu belgede: http://docs.angularjs.org/guide/directive , replaceyönergeler için bir yapılandırma olduğunu söylüyor :

şablon - mevcut öğeyi HTML içeriğiyle değiştirin. Değiştirme işlemi, tüm öznitelikleri / sınıfları eski öğeden yenisine taşır. Daha fazla bilgi için aşağıdaki Bileşen Oluşturma bölümüne bakın.

javascript kodu

app.directive('myd1', function(){
  return {
    template: '<span>directive template1</span>',
    replace: true
  }
});

app.directive('myd2', function(){
  return {
    template: '<span>directive template2</span>',
    replace: false
  }
});

HTML Kodu

<div myd1>
  original content should be replaced
</div>
<div myd2>
  original content should NOT be replaced
</div>

Ancak son sayfa şöyle görünüyor:

directive template1
directive template2

Görünüşe göre replaceçalışmıyor. Bir şey özledim mi?

Canlı demo: http://plnkr.co/edit/rGIgmjO81X2UxJohL4HM?p=preview

Yanıtlar:


175

transclude: trueİçsel içeriği ekleyecek olan ile kafanız karışıyor .

replace: trueyönerge şablonunun içeriğinin yönergenin bildirildiği öğenin, bu durumda <div myd1>etiketinin yerini alacağı anlamına gelir .

http://plnkr.co/edit/k9qSx15fhSZRMwgAIMP4?p=preview

Örneğin olmadan replace:true

<div myd1><span class="replaced" myd1="">directive template1</span></div>

ve ile replace:true

<span class="replaced" myd1="">directive template1</span>

İkinci örnekte görebileceğiniz gibi, div etiketi gerçekten değiştirilmiştir .


Transclude: 'element' ne olacak. Ng-transclude kullanırken replace: 'true' ile aynı şeyi yapıyor gibi görünüyor.
CMCDragonkai

Replace: false, hiç değiştirmemekle aynı mı?
Neil

1
@Neil Evet. Onu kapalı bırakmakla aynıfalse
checketts

10
replaceartık kullanımdan kaldırıldı
Robert

2
@Robert 'değiştirir' yerine geçecek mi yoksa tamamen gitti mi?
cirovladimir

12

Dokümantasyonda belirtildiği gibi, 'değiştir', geçerli öğenin yönerge ile değiştirilip değiştirilmeyeceğini belirler. Diğer seçenek, temelde çocukken eklenip eklenmediğidir. Plnkr'nizin kaynağına bakarsanız, replace'ın yanlış olduğu ikinci yönergede div etiketinin hala orada olduğuna dikkat edin. İlk direktif için öyle değil.

İlk sonuç:

<span myd1="">directive template1</span>

İkinci sonuç:

<div myd2=""><span>directive template2</span></div>

5

Değiştir [True | Yanlış (varsayılan)]

Etki

1.  Replace the directive element. 

Bağımlılık:

1. When replace: true, the template or templateUrl must be required. 

0

Ayrıca, gerçek kök eleman arasında şablonun en üst seviyesinde yorum yaptıysam bu hatayı aldım.

<!-- Just a commented out stuff -->
<div>test of {{value}}</div>
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.