AngularJS için çok yeniyim. Herkes bu AngularJS operatörleri arasındaki farkı açıklayabilir mi: &, @ and =kapsamı uygun örnekle izole ederken.

@yönerge özniteliğinde tanımlanan bir değerin yönerge ayrı tutma kapsamına geçirilmesine izin verir. Değer, basit bir dize değeri ( myattr="hello") veya katıştırılmış ifadelere ( myattr="my_{{helloText}}") sahip AngularJS enterpolasyonlu bir dize olabilir . Bunu, ana kapsamdan çocuk yönergesine "tek yönlü" iletişim olarak düşünün. John Lindquist'in her birini açıklayan bir dizi kısa ekranı var. @ Ekran görüntüsü burada: https://egghead.io/lessons/angularjs-isolate-scope-attribute-binding

&direktifin izolat kapsamının, nitelikte tanımlanan ifadede değerlendirme için değerleri ana kapsama geçirmesine izin verir. Directive özniteliğinin dolaylı olarak bir ifade olduğunu ve çift kaşlı ayraç ifadesi sözdizimi kullanmadığını unutmayın. Bu metin içinde açıklamak daha zordur. Screencast ve burada: https://egghead.io/lessons/angularjs-isolate-scope-expression-binding

=direktifin izolat kapsamı ile üst kapsam arasında iki yönlü bir bağlanma ifadesi oluşturur. Alt kapsamdaki değişiklikler ebeveyne ya da tam tersine yayılır. = İşlevini @ ve & öğelerinin birleşimi olarak düşünün. Screencast = burada: https://egghead.io/lessons/angularjs-isolate-scope-two-way-binding

Ve son olarak, üçünün birlikte tek bir görünümde kullanıldığını gösteren bir ekran görüntüsü: https://egghead.io/lessons/angularjs-isolate-scope-review

Kavramları JavaScript prototip mirası perspektifinden açıklamak istiyorum. Umarım anlamaya yardımcı olur.

Bir direktifin kapsamını tanımlamak için üç seçenek vardır:

1. scope: false: Açısal varsayılan. Direktifin kapsamı tam olarak üst kapsamından biridir ( parentScope).
2. scope: true: Açısal bu yönerge için bir kapsam oluşturur. Kapsam prototip olarak kaynağından devralınır parentScope.
3. scope: {...}: izole kapsam aşağıda açıklanmıştır.

Belirtmek scope: {...}bir isolatedScope. Bir isolatedScopedeğil devralır özelliklerini yapar parentScoperağmen, isolatedScope.$parent === parentScope. Şununla tanımlanır:

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

isolatedScopedoğrudan erişime sahip değil parentScope. Ancak bazen direktifin parentScope. Onlar aracılığıyla iletişim @, =ve &. Semboller kullanma hakkında konu @, =ve &kullanma senaryoları bahsediyoruzisolatedScope .

Genellikle Modals gibi farklı sayfalar tarafından paylaşılan bazı ortak bileşenler için kullanılır. Yalıtılmış bir kapsam, global kapsamın kirlenmesini önler ve sayfalar arasında paylaşılması kolaydır.

Temel bir yönerge: http://jsfiddle.net/7t984sf9/5/ . Gösterilecek bir görüntü:

@: tek yönlü ciltleme

@sadece özelliği 'den' parentScopee geçirir isolatedScope. Denir one-way binding, yani parentScopeözelliklerin değerini değiştiremezsiniz . JavaScript devralmasını biliyorsanız, bu iki senaryoyu kolayca anlayabilirsiniz:

• Bağlama özelliği ilkel türdeyse interpolatedProp, örneğin: değiştirebilir interpolatedProp, ancak parentProp1değiştirilmezsiniz. Eğer değerini değiştirmek Ancak, parentProp1, interpolatedProp(açısal $ sindirmek iken) yeni bir değerle üzerine yazılır olacaktır.

• Bağlama özelliği bir nesne ise, örneğin parentObj: iletilen isolatedScopebir başvuru olduğundan, değerin değiştirilmesi bu hatayı tetikler:

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

=: çift yönlü ciltleme

=denir two-way binding, yani herhangi bir değişiklik childScopeaynı zamanda içindeki değeri de güncelleyecektir, parentScopebunun tersi de geçerlidir. Bu kural hem ilkel nesneler hem de nesneler için geçerlidir. Eğer bağlayıcı türünü değiştirirseniz parentObjolmak =, size değerini değiştirebilir olduğunu göreceksiniz parentObj.x. Bunun tipik bir örneği ngModel.

&: fonksiyon bağlama

&direktifin bazı parentScopeişlevleri çağırmasına ve direktiften bir değer aktarmasına izin verir . Örneğin, JSFiddle: & yönergesi kapsamında kontrol edin .

Direktifte aşağıdaki gibi tıklanabilir bir şablon tanımlayın:

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

Ve şu yönergeyi kullanın:

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

Değişken valueFromDirectiveyönerge ile ana denetleyiciye aktarılır {valueFromDirective: ....

Referans: Kapsamları Anlama

Benim kemanım değil, ama http://jsfiddle.net/maxisam/QrCXh/ farkı gösteriyor. Anahtar parça:

           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:'&'
        }        

@ : tek yönlü ciltleme

= : iki yönlü ciltleme

& : işlev bağlama

AngularJS - İzole Kapsamlar - @ vs = vs &

Açıklamalı kısa örnekler aşağıdaki linkten edinilebilir:

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

@ - tek yönlü ciltleme

Yönerge:

scope : { nameValue : "@name" }

Görünümünde:

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

= - iki yönlü ciltleme

Yönerge:

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

Görünümünde:

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

& - İşlev çağrısı

Yönerge:

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

Görünümünde:

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

Bununla başa çıkmak gerçekten çok uzun zaman aldı. Benim için anahtar, "@" in yerinde değerlendirilmesini ve direktifin içine "=" nesnenin kendisini geçtiği bir sabit olarak aktarılmasını istediğiniz şeyler için olduğunu anlamaktı.

Bunu açıklayan güzel bir blog yazısı var: http://blog.ramses.io/technical/AngularJS-the-difference-between-@-&-and-=-when-declaring-directives-using-isolate-scopes