AngularJS में & बनाम @ और = के बीच क्या अंतर है
जवाबों:
@निर्देश के अलग-अलग दायरे में पारित होने के लिए निर्देश विशेषता पर परिभाषित मूल्य की अनुमति देता है। मान एक साधारण स्ट्रिंग मान ( myattr="hello") हो सकता है या यह एंगुलरजेएस इंटरपोलेटेड स्ट्रिंग हो सकता है जिसमें एम्बेडेड अभिव्यक्ति ( myattr="my_{{helloText}}") हो। इसे बच्चे के निर्देश में माता-पिता के दायरे से "वन-वे" संचार के रूप में सोचें। जॉन लिंडक्विस्ट के पास इनमें से प्रत्येक की व्याख्या करने वाले लघु स्क्रेंस्ट की एक श्रृंखला है। @ पर Screencast यहाँ है: https://egghead.io/lessons/angularjs-isolate-scope-attribute-binding
&विशेषता में परिभाषित अभिव्यक्ति में मूल्यांकन के लिए माता-पिता के दायरे में मूल्यों को पारित करने के लिए निर्देश के पृथक गुंजाइश की अनुमति देता है। ध्यान दें कि निर्देश विशेषता स्पष्ट रूप से एक अभिव्यक्ति है और दोहरे घुंघराले ब्रेस अभिव्यक्ति सिंटैक्स का उपयोग नहीं करती है। यह पाठ में व्याख्या करने के लिए कठिन है। Screencast on & is here: https://egghead.io/lessons/angularjs-isolate-scope-expression-binding
=निर्देश के अलग-अलग दायरे और अभिभावक दायरे के बीच दो-तरफ़ा बाध्यकारी अभिव्यक्ति सेट करता है। बच्चे के दायरे में परिवर्तन माता-पिता के लिए प्रचारित किया जाता है और इसके विपरीत। @ और & के संयोजन के रूप में सोचें। Screencast on = यहाँ है: https://egghead.io/lessons/angularjs-isolate-scope-two-way-binding
और अंत में यहाँ एक स्क्रीनकास्ट है जो तीनों को एक साथ एक ही दृश्य में दिखाता है: https://egghead.io/lessons/angularjs-isolate-scope-review
मैं जावास्क्रिप्ट प्रोटोटाइप वंशानुक्रम के परिप्रेक्ष्य से अवधारणाओं की व्याख्या करना चाहूंगा। उम्मीद है समझने में मदद मिलेगी।
निर्देश के दायरे को परिभाषित करने के लिए तीन विकल्प हैं:
scope: false: कोणीय डिफ़ॉल्ट। निर्देशन का दायरा वास्तव में इसके मूल दायरे (parentScope) में से एक है।scope: true: कोणीय इस निर्देश के लिए एक गुंजाइश बनाता है। गुंजाइश प्रोटोटाइपिक रूप से विरासत में मिली हैparentScope।scope: {...}: पृथक गुंजाइश नीचे बताई गई है।
निर्दिष्ट करना scope: {...}एक परिभाषित करता है isolatedScope। एक isolatedScopeगुण से विरासत में नहीं मिलता है parentScope, यद्यपि isolatedScope.$parent === parentScope। इसके माध्यम से परिभाषित किया गया है:
app.directive("myDirective", function() {
return {
scope: {
... // defining scope means that 'no inheritance from parent'.
},
}
})
isolatedScopeतक सीधी पहुँच नहीं है parentScope। लेकिन कभी-कभी निर्देश के साथ संवाद करने की आवश्यकता होती है parentScope। वे संवाद करते हैं @, =और &। प्रतीकों का उपयोग करने के बारे में विषय @, =और &उपयोग करने वाले परिदृश्यों के बारे में बात कर रहे हैंisolatedScope ।
इसका उपयोग आमतौर पर विभिन्न पन्नों द्वारा साझा किए गए कुछ सामान्य घटकों के लिए किया जाता है, जैसे मोडल्स। एक अलग दायरा वैश्विक दायरे को प्रदूषित करने से रोकता है और पृष्ठों के बीच साझा करना आसान है।
यहाँ एक मूल निर्देश है: http://jsfiddle.net/7t984sf9/5/ । चित्रण करने के लिए एक छवि है:
@: एकतरफा बंधन
@बस से संपत्ति गुजरता parentScopeहै isolatedScope। इसे कहा जाता है one-way binding, जिसका अर्थ है कि आप parentScopeगुणों के मूल्य को संशोधित नहीं कर सकते । यदि आप जावास्क्रिप्ट विरासत से परिचित हैं, तो आप इन दो परिदृश्यों को आसानी से समझ सकते हैं:
यदि बाध्यकारी संपत्ति एक आदिम प्रकार है,
interpolatedPropउदाहरण में जैसे: आप संशोधित कर सकते हैंinterpolatedProp, लेकिनparentProp1बदला नहीं जाएगा। हालांकि, अगर आप का मूल्य बदलparentProp1,interpolatedPropनए मान के साथ ओवरराइट किया जाएगा (जब कोणीय $ पचाने)।यदि बाइंडिंग प्रॉपर्टी कुछ ऑब्जेक्ट है, जैसे
parentObj: चूंकि पास किया गयाisolatedScopeएक संदर्भ है, तो मूल्य को संशोधित करना इस त्रुटि को ट्रिगर करेगा:TypeError: Cannot assign to read only property 'x' of {"x":1,"y":2}
=: दो तरफा बंधन
=कहा जाता है two-way binding, जिसका अर्थ है कि किसी भी संशोधन में और इसके विपरीत childScopeमूल्य को अद्यतन किया जाएगा parentScope। यह नियम आदिम और वस्तुओं दोनों के लिए काम करता है। यदि आप बाध्यकारी प्रकार को बदल parentObjदेते हैं =, तो आप पाएंगे कि आप के मूल्य को संशोधित कर सकते हैं parentObj.x। एक विशिष्ट उदाहरण है ngModel।
&: कार्य बंधन
&निर्देश को कुछ parentScopeफ़ंक्शन को कॉल करने और निर्देश से कुछ मूल्य में पारित करने की अनुमति देता है । उदाहरण के लिए, JSFiddle की जाँच करें : और निर्देशकीय दायरे में ।
निर्देश में क्लिक करने योग्य टेम्पलेट को परिभाषित करें:
<div ng-click="vm.onCheck({valueFromDirective: vm.value + ' is from the directive'})">और जैसे निर्देश का उपयोग करें:
<div my-checkbox value="vm.myValue" on-check="vm.myFunction(valueFromDirective)"></div>चर valueFromDirectiveको निर्देशक से मूल नियंत्रक तक पारित किया जाता है {valueFromDirective: ...।
संदर्भ: स्कोप को समझना
मेरा फील नहीं, लेकिन http://jsfiddle.net/maxisam/QrCXh/ अंतर दिखाता है। मुख्य टुकड़ा है:
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:'&'
}
@ : वन-वे बाइंडिंग
= : दो-तरफ़ा बंधन
& : फ़ंक्शन बाइंडिंग
AngularJS - पृथक स्कोप - @ बनाम = बनाम और
स्पष्टीकरण के साथ लघु उदाहरण नीचे दिए गए लिंक पर उपलब्ध हैं:
http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs
@ - एक तरह से बाध्यकारी
निर्देश में:
scope : { nameValue : "@name" }दृश्य में:
<my-widget name="{{nameFromParentScope}}"></my-widget>= - दो तरह से बाध्यकारी
निर्देश में:
scope : { nameValue : "=name" },
link : function(scope) {
scope.name = "Changing the value here will get reflected in parent scope value";
}
दृश्य में:
<my-widget name="{{nameFromParentScope}}"></my-widget>& - फ़ंक्शन कॉल करें
निर्देश में:
scope : { nameChange : "&" }
link : function(scope) {
scope.nameChange({newName:"NameFromIsolaltedScope"});
}
दृश्य में:
<my-widget nameChange="onNameChange(newName)"></my-widget>यह वास्तव में इस पर एक संभाल पाने के लिए मुझे एक लंबे समय के लिए नरक ले गया। मेरे लिए कुंजी यह समझने में थी कि "@" सामान के लिए है जिसे आप सीटू में मूल्यांकन करना चाहते हैं और निर्देश के माध्यम से एक स्थिरांक के रूप में गुजरता है जहां "=" वास्तव में वस्तु को ही पास करता है।
: वहाँ एक अच्छा ब्लॉग पोस्ट में इस यह बताता है http://blog.ramses.io/technical/AngularJS-the-difference-between-@-&-and-=-when-declaring-directives-using-isolate-scopes