AngularJS
AngularJS बाइंडिंग विकल्प (`=`, `@`, `और` आदि)

टिप्पणियों

@ वन-वे बाइंडिंग, विशेषता बाइंडिंग।

शाब्दिक मान (कोई वस्तु नहीं) में पास करें, जैसे कि एक स्ट्रिंग या संख्या।

चाइल्ड स्कोप का अपना मूल्य होता है, यदि यह वैल्यू अपडेट करता है, तो पेरेंट स्कोप का अपना पुराना मूल्य होता है (चाइल्ड स्कोप पैरेन्स स्कोप वैल्यू को संशोधित नहीं कर सकता है)। जब पैरेंट स्कोप वैल्यू को बदल दिया जाता है, तो चाइल्ड स्कोप वैल्यू को भी बदल दिया जाएगा। डाइजेस्ट कॉल पर न केवल निर्देशात्मक निर्माण पर, बल्कि हर बार सभी प्रक्षेप दिखाई देते हैं।

<one-way text="Simple text." <!-- 'Simple text.' -->
         simple-value="123" <!-- '123' Note, is actually a string object. -->
         interpolated-value="{{parentScopeValue}}" <!-- Some value from parent scope. You can't change parent scope value, only child scope value. Note, is actually a string object. -->
         interpolated-function-value="{{parentScopeFunction()}}" <!-- Executes parent scope function and takes a value. -->
         
         <!-- Unexpected usage. -->
         object-item="{{objectItem}}" <!-- Converts object|date to string. Result might be: '{"a":5,"b":"text"}'. -->
         function-item="{{parentScopeFunction}}"> <!-- Will be an empty string. -->
</one-way>

= दो तरफा बंधन।

संदर्भ द्वारा एक मान में पास करना, आप दोनों स्कोप के बीच मूल्य साझा करना चाहते हैं और उन्हें दोनों स्कोप से जोड़तोड़ करना चाहते हैं। प्रक्षेप के लिए आपको {{...}} का उपयोग नहीं करना चाहिए।

<two-way text="'Simple text.'" <!-- 'Simple text.' -->
         simple-value="123" <!-- 123 Note, is actually a number now. -->
         interpolated-value="parentScopeValue" <!-- Some value from parent scope. You may change it in one scope and have updated value in another. -->
         object-item="objectItem" <!-- Some object from parent scope. You may change object properties in one scope and have updated properties in another. -->
         
         <!-- Unexpected usage. -->
         interpolated-function-value="parentScopeFunction()" <!-- Will raise an error. -->
         function-item="incrementInterpolated"> <!-- Pass the function by reference and you may use it in child scope. -->
</two-way>

संदर्भ द्वारा फ़ंक्शन पास करना एक बुरा विचार है: किसी फ़ंक्शन की परिभाषा को बदलने की गुंजाइश देने के लिए, और दो अनावश्यक वॉचर बनाए जाएंगे, आपको वॉचर्स काउंट को कम करने की आवश्यकता है।

& फ़ंक्शन बाइंडिंग, अभिव्यक्ति बाइंडिंग।

एक निर्देश में एक विधि पारित करें। यह माता-पिता के दायरे के संदर्भ में एक अभिव्यक्ति को निष्पादित करने का एक तरीका प्रदान करता है। विधि को माता-पिता के दायरे में निष्पादित किया जाएगा, आप वहां बच्चे के दायरे से कुछ मापदंडों को पारित कर सकते हैं। प्रक्षेप के लिए आपको {{...}} का उपयोग नहीं करना चाहिए। जब आप उपयोग करते हैं और एक निर्देश में, यह एक फ़ंक्शन उत्पन्न करता है जो अभिभावक के दायरे के खिलाफ मूल्यांकन की गई अभिव्यक्ति का मूल्य लौटाता है (जैसा कि = जहां आप सिर्फ एक संदर्भ पास करते हैं)।

<expression-binding interpolated-function-value="incrementInterpolated(param)" <!-- interpolatedFunctionValue({param: 'Hey'}) will call passed function with an argument. -->
                    function-item="incrementInterpolated" <!-- functionItem({param: 'Hey'})() will call passed function, but with no possibility set up a parameter. -->
                    text="'Simple text.'"  <!-- text() == 'Simple text.'-->
                    simple-value="123" <!-- simpleValue() == 123 -->
                    interpolated-value="parentScopeValue" <!-- interpolatedValue() == Some value from parent scope. -->
                    object-item="objectItem"> <!-- objectItem() == Object item from parent scope. -->
</expression-binding>

सभी मापदंडों को कार्यों में लपेटा जाएगा।

एक साधारण नमूने के माध्यम से उपलब्ध बाध्यकारी

angular.component("SampleComponent", {
  bindings: {
     title: '@',
     movies: '<',
     reservation: "=",
     processReservation: "&"
  }
});

यहां हमारे पास सभी बाध्यकारी तत्व हैं।

@ इंगित करता है कि हमें एक बहुत ही बुनियादी बंधन की आवश्यकता है, माता-पिता के दायरे से लेकर बच्चों के दायरे तक, बिना किसी निगरानी के, किसी भी तरह से। पैरेंट स्कोप में हर अपडेट पेरेंट स्कोप में रहेगा, और चाइल्ड स्कोप पर कोई भी अपडेट पैरेंट स्कोप से कम्यूनिकेट नहीं होगा।

< एक तरह से बंधन को इंगित करता है। माता-पिता के दायरे में अपडेट बच्चों के दायरे में प्रचारित किया जाएगा, लेकिन बच्चों के दायरे में कोई भी अद्यतन माता-पिता के दायरे में लागू नहीं किया जाएगा।

= पहले से ही दो-तरफ़ा बंधन के रूप में जाना जाता है। माता-पिता के दायरे पर हर अपडेट बच्चों पर लागू किया जाएगा, और हर बच्चे के अपडेट को माता-पिता के दायरे में लागू किया जाएगा।

& अब इसका उपयोग आउटपुट बाइंडिंग के लिए किया जाता है। घटक प्रलेखन के अनुसार, इसका उपयोग मूल गुंजाइश विधि को संदर्भित करने के लिए किया जाना चाहिए। बच्चों के दायरे में हेरफेर करने के बजाय, अद्यतन डेटा के साथ मूल विधि को कॉल करें!

वैकल्पिक विशेषता को बांधें

bindings: {
   mandatory: '=' 
   optional: '=?',
   foo: '=?bar'
}

वैकल्पिक विशेषताओं को प्रश्न चिह्न के साथ चिह्नित किया जाना चाहिए: =? या =?bar । यह ($compile:nonassign) विशिष्ट ($compile:nonassign) अपवाद के लिए सुरक्षा है।