Penggunaan simbol '@', '&', '=' dan '>' dalam pengikatan lingkup direktif kustom: AngularJS

Saya telah membaca banyak tentang penggunaan simbol-simbol ini dalam penerapan arahan khusus di AngularJS tetapi konsepnya masih belum jelas bagi saya. Maksud saya, apa artinya jika saya menggunakan salah satu nilai lingkup dalam direktif khusus?

var mainApp = angular.module("mainApp", []);
mainApp.directive('modalView',function(){
  return{
     restrict:'E',
     scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true
  }
});

Apa sebenarnya yang kita lakukan dengan ruang lingkup di sini?

Saya juga tidak yakin apakah "ruang lingkup: '>'" ada dalam dokumentasi resmi atau tidak. Ini telah digunakan dalam proyek saya.

Edit-1

Penggunaan "scope: '>'" adalah masalah dalam proyek saya dan telah diperbaiki.

Dalam arahan AngularJS, ruang lingkup memungkinkan Anda untuk mengakses data dalam atribut elemen di mana arahan diterapkan.

Ini digambarkan terbaik dengan contoh:

<div my-customer name="Customer XYZ"></div>

dan definisi arahan:

angular.module('myModule', [])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      customerName: '@name'
    },
    controllerAs: 'vm',
    bindToController: true,
    controller: ['$http', function($http) {
      var vm = this;

      vm.doStuff = function(pane) {
        console.log(vm.customerName);
      };
    }],
    link: function(scope, element, attrs) {
      console.log(scope.customerName);
    }
  };
});

Ketika scope properti digunakan direktif dalam mode "ruang lingkup terisolasi", artinya tidak dapat langsung mengakses ruang lingkup pengendali induk.

Dalam istilah yang sangat sederhana, arti dari simbol yang mengikat adalah:

someObject: '=' (pengikatan data dua arah)

someString: '@'(Lulus langsung atau melalui interpolasi dengan notasi kurung kurawal ganda {{}})

someExpression: '&' (misalnya hideDialog() )

Informasi ini hadir di halaman dokumentasi direktif AngularJS , meskipun agak tersebar di seluruh halaman.

Simbol >bukan bagian dari sintaksis.

Namun, <ada sebagai bagian dari binding komponen AngularJS dan berarti satu cara mengikat.

> tidak ada dalam dokumentasi.

< adalah untuk penjilidan satu arah.

@mengikat adalah untuk melewati string. String ini mendukung {{}}ekspresi untuk nilai interpolasi.

=mengikat adalah untuk model mengikat dua arah. Model dalam lingkup induk terkait dengan model dalam lingkup terisolasi direktif.

& mengikat adalah untuk melewatkan metode ke dalam lingkup direktif Anda sehingga dapat dipanggil dalam direktif Anda.

Ketika kita menetapkan ruang lingkup: true dalam direktif, Angular js akan membuat ruang lingkup baru untuk arahan itu. Itu berarti setiap perubahan yang dilakukan pada ruang lingkup direktif tidak akan mencerminkan kembali pada pengendali induk.

< mengikat satu arah

= mengikat dua arah

& mengikat fungsi

@ hanya lulus string

Ketika kami membuat arahan pelanggan, ruang lingkup arahan bisa dalam lingkup terisolasi, itu berarti arahan tidak berbagi ruang lingkup dengan controller; baik direktif dan pengontrol memiliki ruang lingkup sendiri. Namun, data dapat diteruskan ke ruang lingkup direktif dalam tiga cara yang mungkin.

1. Data dapat dikirimkan sebagai string menggunakan @string literal, melewati nilai string, mengikat satu arah.
2. Data dapat dikirimkan sebagai objek menggunakan =string literal, objek lulus, 2 cara mengikat.
3. Data dapat diteruskan sebagai fungsi &string literal, memanggil fungsi eksternal, dapat meneruskan data dari direktif ke pengontrol.

The AngularJS dokumentasi di arahan yang cukup baik ditulis untuk apa simbol berarti.

Agar jelas, Anda tidak bisa hanya memiliki

scope: '@'

dalam definisi direktif. Anda harus memiliki properti yang mengikatnya, seperti pada:

scope: {
    myProperty: '@'
}

Saya sangat menyarankan Anda membaca dokumentasi dan tutorial di situs. Ada lebih banyak informasi yang perlu Anda ketahui tentang cakupan terisolasi dan topik lainnya.

Berikut adalah kutipan langsung dari halaman yang terhubung di atas, mengenai nilai-nilai scope:

Properti lingkup bisa benar, objek atau nilai falsy:

• falsy : Tidak ada ruang lingkup akan dibuat untuk arahan. Arahan akan menggunakan ruang lingkup orang tuanya.

• true: Ruang lingkup anak baru yang diwarisi secara prototipe dari induknya akan dibuat untuk elemen direktif. Jika beberapa arahan pada elemen yang sama meminta ruang lingkup baru, hanya satu ruang lingkup baru dibuat. Aturan cakupan baru tidak berlaku untuk root template karena root template selalu mendapat cakupan baru.

• {...} (hash objek) : Ruang lingkup "isolate" baru dibuat untuk elemen direktif. Ruang lingkup 'isolat' berbeda dari ruang lingkup normal dalam lingkup yang tidak secara prototip mewarisi dari ruang lingkup induknya. Ini berguna saat membuat komponen yang dapat digunakan kembali, yang seharusnya tidak secara tidak sengaja membaca atau memodifikasi data dalam lingkup induk.

^{Diperoleh 2017-02-13 dari https://code.angularjs.org/1.4.11/docs/api/ng/service/ $ compile # -scope-, dilisensikan sebagai CC-by-SA 3.0}

Saya mengalami kesulitan mengikat nilai dengan salah satu simbol di AngularJS 1.6. Saya tidak mendapatkan nilai sama sekali, hanya undefined, meskipun saya melakukannya dengan cara yang persis sama seperti binding lainnya dalam file yang sama yang berfungsi.

Masalahnya adalah: nama variabel saya memiliki garis bawah.

Ini gagal:

bindings: { import_nr: '='}

Ini bekerja:

bindings: { importnr: '='}

(Tidak sepenuhnya terkait dengan pertanyaan awal, tapi itu adalah salah satu hasil pencarian teratas ketika saya melihat, jadi semoga ini membantu seseorang dengan masalah yang sama.)