Bagaimana cara menggunakan fitur 'ganti' untuk arahan AngularJS kustom?


92

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


2
@georgeawg menandai ini sebagai duplikat dari pertanyaan lain yang ditanyakan / dijawab di kemudian hari selain pertanyaan ini.
Kaya Toast

Jawaban:


189

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.


6
Ini adalah penjelasan yang sangat sederhana. Dan terima kasih banyak untuk mengklarifikasi transklusi juga.
Kaya Toast

Lebih penting lagi, mengapa tidak dijelaskan di docs.angularjs.org/guide/directive dan mengapa jawaban ini tidak terhubung ke jawaban pasti tentang topik tersebut?
Trindaz

3
@Trindaz replacesudah tidak digunakan lagi sejak AngularJS v1.3 ( tautan ).
Tonči D.

33

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

Untuk informasi lebih lanjut, lihat


2
Saya terus membaca bahwa ini seharusnya didukung secara tidak resmi di Angular 2, tetapi saya tidak tahu cara mengaktifkannya. Bisakah seseorang memberi tahu saya apa sintaksnya?
devios1

@devios Saya memerlukan hal seperti itu untuk komponen mdl saya tetapi saat ini menggunakan remove-hostsolusi stackoverflow.com/questions/34280475/… jika Anda mengetahui tentang pengaktifan replace: truedi A2, beri tahu kami.
kuncevic.dev
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.