Saya sangat baru di AngularJS. Adakah yang bisa menjelaskan perbedaan antara operator AngularJS ini: &, @ and =ketika mengisolasi ruang lingkup dengan contoh yang tepat.

@memungkinkan nilai yang didefinisikan pada atribut direktif untuk diteruskan ke ruang lingkup direktif direktif. Nilainya bisa berupa nilai string sederhana ( myattr="hello") atau bisa juga string yang diinterpolasi AngularJS dengan ekspresi yang tertanam ( myattr="my_{{helloText}}"). Anggap saja sebagai komunikasi "satu arah" dari ruang lingkup orang tua ke dalam arahan anak. John Lindquist memiliki serangkaian screencasts pendek yang menjelaskan masing-masing. Screencast pada @ ada di sini: https://egghead.io/lessons/angularjs-isolate-scope-attribute-binding

&memungkinkan lingkup isolat direktif untuk meneruskan nilai ke lingkup induk untuk evaluasi dalam ekspresi yang didefinisikan dalam atribut. Perhatikan bahwa atribut direktif secara implisit merupakan ekspresi dan tidak menggunakan sintaks ekspresi kurawal ganda. Yang ini lebih sulit untuk dijelaskan dalam teks. Screencast pada & ada di sini: https://egghead.io/lessons/angularjs-isolate-scope-expression-binding

=mengatur ekspresi pengikatan dua arah antara ruang lingkup direktif direktif dan ruang lingkup induk. Perubahan dalam lingkup anak disebarkan ke orang tua dan sebaliknya. Pikirkan = sebagai kombinasi @ dan &. Screencast on = ada di sini: https://egghead.io/lessons/angularjs-isolate-scope-two-way-binding

Dan akhirnya di sini adalah screencast yang menunjukkan ketiganya digunakan bersama dalam satu tampilan: https://egghead.io/lessons/angularjs-isolate-scope-review

Saya ingin menjelaskan konsep-konsep dari perspektif warisan prototipe JavaScript. Semoga membantu mengerti.

Ada tiga opsi untuk menentukan ruang lingkup arahan:

1. scope: false: Default sudut. Ruang lingkup direktif adalah persis salah satu ruang lingkup induknya ( parentScope).
2. scope: true: Angular menciptakan ruang lingkup untuk arahan ini. Cakupan prototipically mewarisi dari parentScope.
3. scope: {...}: lingkup terisolasi dijelaskan di bawah ini.

Menentukan scope: {...}mendefinisikan suatu isolatedScope. An isolatedScopetidak mewarisi properti dari parentScope, meskipun isolatedScope.$parent === parentScope. Ini didefinisikan melalui:

app.directive("myDirective", function() {
    return {
        scope: {
            ... // defining scope means that 'no inheritance from parent'.
        },
    }
})

isolatedScopetidak memiliki akses langsung ke parentScope. Tetapi kadang - kadang arahan perlu berkomunikasi dengan parentScope. Mereka berkomunikasi melalui @, =dan &. Topik tentang menggunakan simbol @, =dan &berbicara tentang skenario menggunakanisolatedScope .

Biasanya digunakan untuk beberapa komponen umum yang dibagikan oleh halaman yang berbeda, seperti Modals. Ruang lingkup yang terisolasi mencegah polusi ruang lingkup global dan mudah untuk dibagikan di antara halaman.

Berikut ini adalah arahan dasar: http://jsfiddle.net/7t984sf9/5/ . Gambar untuk diilustrasikan adalah:

@: pengikatan satu arah

@cukup melewati properti dari parentScopeke isolatedScope. Ini disebut one-way binding, yang berarti Anda tidak dapat mengubah nilai parentScopeproperti. Jika Anda terbiasa dengan warisan JavaScript, Anda dapat memahami dua skenario ini dengan mudah:

• Jika properti mengikat adalah tipe primitif, seperti interpolatedPropdalam contoh: Anda dapat memodifikasi interpolatedProp, tetapi parentProp1tidak akan diubah. Namun, jika Anda mengubah nilai parentProp1, interpolatedPropakan ditimpa dengan nilai baru (saat $ angular).

• Jika properti yang mengikat adalah beberapa objek, seperti parentObj: karena yang diteruskan ke isolatedScopereferensi, memodifikasi nilai akan memicu kesalahan ini:

  TypeError: Cannot assign to read only property 'x' of {"x":1,"y":2}

=: mengikat dua arah

=dipanggil two-way binding, yang berarti setiap modifikasi dalam childScopejuga akan memperbarui nilai dalam parentScope, dan sebaliknya. Aturan ini berfungsi untuk primitif dan objek. Jika Anda mengubah jenis pengikatan parentObjmenjadi =, Anda akan menemukan bahwa Anda dapat mengubah nilai parentObj.x. Contoh tipikal adalah ngModel.

&: fungsi mengikat

&memungkinkan direktif untuk memanggil beberapa parentScopefungsi dan meneruskan beberapa nilai dari direktif. Misalnya, periksa JSFiddle: & dalam ruang lingkup direktif .

Tetapkan template yang dapat diklik dalam direktif seperti:

<div ng-click="vm.onCheck({valueFromDirective: vm.value + ' is from the directive'})">

Dan gunakan arahan seperti:

<div my-checkbox value="vm.myValue" on-check="vm.myFunction(valueFromDirective)"></div>

Variabel valueFromDirectivedilewatkan dari direktif ke pengendali induk melalui {valueFromDirective: ....

Referensi: Memahami Lingkup

Bukan biola saya, tetapi http://jsfiddle.net/maxisam/QrCXh/ menunjukkan perbedaannya. Bagian kuncinya adalah:

           scope:{
            /* NOTE: Normally I would set my attributes and bindings
            to be the same name but I wanted to delineate between 
            parent and isolated scope. */                
            isolatedAttributeFoo:'@attributeFoo',
            isolatedBindingFoo:'=bindingFoo',
            isolatedExpressionFoo:'&'
        }        

@ : penjilidan satu arah

= : penjilidan dua arah

& : mengikat fungsi

AngularJS - Lingkup Terisolasi - @ vs = vs &

Contoh singkat dengan penjelasan tersedia di tautan di bawah ini:

http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs

@ - satu arah mengikat

Dalam arahan:

scope : { nameValue : "@name" }

Dalam penglihatan:

<my-widget name="{{nameFromParentScope}}"></my-widget>

= - mengikat dua arah

Dalam arahan:

scope : { nameValue : "=name" },
link : function(scope) {
  scope.name = "Changing the value here will get reflected in parent scope value";
}

Dalam penglihatan:

<my-widget name="{{nameFromParentScope}}"></my-widget>

& - Panggilan fungsi

Dalam arahan:

scope : { nameChange : "&" }
link : function(scope) {
  scope.nameChange({newName:"NameFromIsolaltedScope"});
}

Dalam penglihatan:

<my-widget nameChange="onNameChange(newName)"></my-widget>

Butuh waktu sangat lama bagi saya untuk benar-benar memahami hal ini. Kunci bagi saya adalah memahami bahwa "@" adalah untuk hal-hal yang ingin Anda evaluasi in situ dan diteruskan ke arahan sebagai konstanta di mana "=" benar-benar melewati objek itu sendiri.

Ada posting blog yang bagus yang menjelaskan hal ini di: http://blog.ramses.io/technical/AngularJS-the-difference-between-@-&-and-=-when-dclaring-directives-using-isolate-scopes