Aşağıdaki kodda neden herhangi bir etkisi var replace=trueveya replace=falseyok?

Replace = false olduğunda "bazı mevcut içerikler" neden görüntülenmiyor?

Ya da daha alçakgönüllü bir ifadeyle replace=true/falsedirektiflerdeki özelliğin ne olduğunu ve nasıl kullanılacağını nazikçe açıklayabilir misiniz ?

Misal

JS / Açısal:

<script>
    angular.module('scopes', [])
          .controller('Ctrl', function($scope) {
                $scope.title = "hello";

          })
          .directive('myDir', function() {
            return {
              restrict: 'E',
              replace: true,
              template: '<div>{{title}}</div>'
            };
      });
</script>

HTML:

<div ng-controller="Ctrl">
    <my-dir><h3>some existing content</h3></my-dir>
</div>

Plunker'da burada görün:

http://plnkr.co/edit/4ywZGwfsKHLAoGL38vvW?p=preview

Sahip olduğunuzda replace: trueaşağıdaki DOM parçasına sahip olursunuz:

<div ng-controller="Ctrl" class="ng-scope">
    <div class="ng-binding">hello</div>
</div>

oysa, sizle şunu replace: falsealırsınız:

<div ng-controller="Ctrl" class="ng-scope">
    <my-dir>
        <div class="ng-binding">hello</div>
    </my-dir>
</div>

Yani replacedirektifleri mülk (yönerge uygulandığı hangi elemana olmadığını ifade <my-dir>bu durumda) kalmalıdır ( replace: false) ve yönerge şablon edilmelidir eklenmiş , onun çocuğu olarak

VEYA

direktifin uygulandığı öğe , direktifin şablonuyla ( ) değiştirilmelidirreplace: true .

Her iki durumda da öğenin (direktifin uygulandığı) çocukları kaybedilecektir. Öğenin orijinal içeriğini / çocuklarını korumak istiyorsanız, onu çevirmeniz gerekir. Aşağıdaki direktif bunu yapacaktır:

.directive('myDir', function() {
    return {
        restrict: 'E',
        replace: false,
        transclude: true,
        template: '<div>{{title}}<div ng-transclude></div></div>'
    };
});

Bu durumda, direktifin şablonunda özniteliğe sahip bir öğeye (veya öğelere) sahipseniz ng-transclude, içeriği öğenin (yönergenin uygulandığı) orijinal içeriği ile değiştirilecektir.

Çeviri örneğine bakın http://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=preview

Bkz bu translusion hakkında daha fazla bilgi için.

replace:true Kullanımdan Kaldırıldı

Dokümanlar'dan:

replace ([KULLANIMDAN KALDIRILDI!], Sonraki büyük sürümde kaldırılacak - yani v2.0)

şablonun neyi değiştirmesi gerektiğini belirtin. Varsayılan değer false.

• true - şablon, yönergenin öğesinin yerini alacaktır.
• false - şablon, yönerge öğesinin içeriğini değiştirecektir.

- AngularJS Kapsamlı Direktif API

GitHub'dan:

Caitp - Kullanımdan kaldırıldı çünkü replace: truebir kısmı makul bir şekilde çözülemeyen bilinen, çok aptalca sorunlar var . Dikkatli olursanız ve bu sorunlardan kaçınırsanız, o zaman size daha fazla güç verir, ancak yeni kullanıcıların yararına, onlara "bu size bir baş ağrısı verir, yapma" demek daha kolaydır.

- AngularJS Issue # 7636

Güncelleme

Not: replace: truekullanımdan kaldırılmıştır ve esas olarak burada listelenen sorunlar nedeniyle kullanılması önerilmez. Yeni Angular'da tamamen kaldırıldı.

Replace ile ilgili sorunlar: true

• Öznitelik değerleri birleştirilmez
• Yönergeler derlemeden önce tekilleştirilmez
• transclude: element değiştirme şablonu kökünde beklenmeyen etkiler olabilir

Daha fazla bilgi için, bkz

• AngularJS $ compile Service API Reference - ile ilgili sorunlar replace:true