Mengapa replace=trueataureplace=false tidak berdampak pada kode di bawah ini?

Mengapa "beberapa konten yang ada" tidak ditampilkan saat replace = false?

Atau dengan lebih sederhana, dapatkah Anda dengan ramah menjelaskan apa saja replace=true/falsefitur dalam arahan dan bagaimana cara menggunakannya?

Contoh

JS / Sudut:

<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>

Lihat di Plunker di sini:

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

Jika sudah, replace: trueAnda mendapatkan potongan DOM berikut:

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

sedangkan, dengan replace: falseAnda dapatkan ini:

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

Jadi replaceproperti dalam direktif merujuk pada apakah elemen yang direktif tersebut diterapkan ( <my-dir>dalam kasus itu) harus tetap ( replace: false) dan template direktif harus ditambahkan sebagai anaknya,

ATAU

elemen yang direktif diterapkan harus diganti ( replace: true) dengan template direktif itu.

Dalam kedua kasus elemen (di mana arahan diterapkan) anak-anak akan hilang. Jika Anda ingin mempertahankan konten asli / turunan dari elemen tersebut, Anda harus mentranslasikannya. Arahan berikut akan melakukannya:

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

Dalam hal ini jika dalam template direktif Anda memiliki elemen (atau elemen) dengan atribut ng-transclude, isinya akan diganti dengan konten asli elemen (yang direktif diterapkan).

Lihat contoh translusi http://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=preview

Lihat ini untuk membaca lebih lanjut tentang translusi.

replace:true sudah ditinggalkan

Dari Dokumen:

replace ([TIDAK DIGUNAKAN LAGI!], Akan dihapus di rilis utama berikutnya - yaitu v2.0)

tentukan template apa yang harus diganti. Default-nya adalah false.

• true - template akan menggantikan elemen direktif.
• false - template akan menggantikan konten elemen direktif.

- AngularJS Comprehensive Directive API

Dari GitHub:

Caitp-- Ini tidak berlaku lagi karena ada masalah yang diketahui, sangat konyol replace: true, yang beberapa di antaranya tidak dapat benar-benar diperbaiki dengan cara yang masuk akal. Jika Anda berhati-hati dan menghindari masalah ini, maka lebih banyak kekuatan untuk Anda, tetapi untuk kepentingan pengguna baru, lebih mudah untuk hanya memberi tahu mereka "ini akan membuat Anda pusing, jangan lakukan itu".

- AngularJS Masalah # 7636

Memperbarui

Catatan: replace: truesudah usang dan tidak direkomendasikan untuk digunakan, terutama karena masalah yang tercantum di sini. Itu telah sepenuhnya dihapus di Angular baru.

Masalah dengan replace: true

• Nilai atribut tidak digabungkan
• Perintah tidak dihapus duplikatnya sebelum kompilasi
• transclude: element di root replace template dapat memiliki efek yang tidak terduga

Untuk informasi lebih lanjut, lihat

• AngularJS $ compile Service API Reference - Masalah dengan replace:true