कस्टम डाइरेक्टिव स्कोप बाइंडिंग में प्रतीकों '@', '&', '=' और '>' का उपयोग: AngularJS

Question

मैंने AngularJS में कस्टम निर्देशों के कार्यान्वयन में इन प्रतीकों के उपयोग के बारे में बहुत कुछ पढ़ा है लेकिन अवधारणा अभी भी मेरे लिए स्पष्ट नहीं है। मेरा मतलब है, अगर मैं कस्टम निर्देश में गुंजाइश मानों का उपयोग करता हूं तो इसका क्या मतलब है?

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

वास्तव में हम यहां क्या कर रहे हैं?

मुझे यह भी सुनिश्चित नहीं है कि आधिकारिक दस्तावेज में "गुंजाइश: '>" मौजूद है या नहीं। इसका उपयोग मेरे प्रोजेक्ट में किया गया है।

संपादित करें -1

के उपयोग "गुंजाइश: '>'" मेरी परियोजना में एक मुद्दा था और यह तय किया गया है।

Answer 1

एक एंगुलरजेएस निर्देश में गुंजाइश आपको उस तत्व की विशेषताओं में डेटा तक पहुंचने की अनुमति देती है जिसमें निर्देश लागू किया जाता है।

यह एक उदाहरण के साथ सबसे अच्छा सचित्र है:

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

और निर्देश परिभाषा:

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);
    }
  };
});

जब scopeसंपत्ति का उपयोग किया जाता है तो निर्देश तथाकथित "पृथक दायरे" मोड में होता है, जिसका अर्थ है कि यह सीधे मूल नियंत्रक के दायरे तक नहीं पहुंच सकता है।

बहुत सरल शब्दों में, बाध्यकारी प्रतीकों का अर्थ है:

someObject: '=' (दो-तरफ़ा डेटा बाइंडिंग)

someString: '@'(डबल घुंघराले ब्रेस नोटेशन के साथ सीधे या प्रक्षेप के माध्यम से पारित {{}})

someExpression: '&'(उदा hideDialog())

यह जानकारी AngularJS के निर्देशक दस्तावेज पृष्ठ में मौजूद है , हालांकि कुछ हद तक पूरे पृष्ठ में फैली हुई है।

प्रतीक >वाक्य रचना का हिस्सा नहीं है।

हालांकि, <के हिस्से के रूप में मौजूद है AngularJS घटक बाइंडिंग और इसका मतलब है एक तरह से बाध्यकारी।

Comments

किस बारे में @??

— होमर

यह ध्यान देने योग्य होना चाहिए कि <केवल 1.5 में घटकों के साथ संगत नहीं है, यह निर्देशों के साथ भी संगत है। @ होम वैकल्पिक के? रूप में विशेषता को दर्शाता है ।

— जेन्स बोडल

Answer 2

> प्रलेखन में नहीं है।

< एक तरह से बंधन के लिए है।

@बाइंडिंग स्ट्रिंग्स पासिंग के लिए है। ये तार {{}}प्रक्षेपित मूल्यों के लिए अभिव्यक्ति का समर्थन करते हैं।

=बाइंडिंग दो-तरफ़ा मॉडल बाइंडिंग के लिए है। माता-पिता के दायरे में मॉडल निर्देश के पृथक दायरे में मॉडल से जुड़ा हुआ है।

& बाध्यकारी आपके निर्देशन के दायरे में एक विधि पारित करने के लिए है ताकि इसे आपके निर्देश के भीतर कहा जा सके।

जब हम गुंजाइश सेट कर रहे हैं: निर्देश में सच है, तो कोणीय js उस निर्देश के लिए एक नया दायरा बनाएंगे। इसका मतलब है कि निर्देश क्षेत्र में किए गए कोई भी परिवर्तन वापस मूल नियंत्रक में प्रतिबिंबित नहीं होंगे।

Answer 3

< एकतरफा बंधन

= दो तरफा बंधन

& कार्य बंधन

@ केवल तार गुजारें

Comments

यह एक ही जवाब को दोहराने के लिए कोई मतलब नहीं है, खेद है कि एक ही जवाब नहीं यह उपरोक्त उत्तरों से एक निकाले गए जानकारी लगता है।

— मैक

कभी-कभी छोटा उत्तर अधिक व्यावहारिक हो जाता है!

— Marwen Trabelsi

अगर आप इसे कुछ छोटी पंक्तियों में समझा सकते हैं तो जंक informations जोड़ने की कोई आवश्यकता नहीं है

— Marwen Trabelsi

उच्चतर मतदान विकल्पों में से किसी एक को संपादित करने के लिए यह बेहतर होगा।

— एन

Answer 4

जब हम एक ग्राहक निर्देश बनाते हैं, तो निर्देश का दायरा अलग-अलग दायरे में हो सकता है, इसका मतलब है कि निर्देश नियंत्रक के साथ एक गुंजाइश साझा नहीं करता है; निर्देश और नियंत्रक दोनों का अपना दायरा है। हालांकि, डेटा को तीन संभावित तरीकों से निर्देश दायरे में पारित किया जा सकता है।

1. स्ट्रिंग @स्ट्रिंग शाब्दिक, पास स्ट्रिंग मान, एक तरह से बंधन का उपयोग करके डेटा को स्ट्रिंग के रूप में पारित किया जा सकता है ।
2. =स्ट्रिंग स्ट्रिंग के माध्यम से डेटा को ऑब्जेक्ट के रूप में पास किया जा सकता है , ऑब्जेक्ट को पास करने के लिए, 2 तरीके बाध्यकारी हैं।
3. डेटा को एक फ़ंक्शन के रूप में पास किया जा सकता है &स्ट्रिंग शाब्दिक, बाहरी फ़ंक्शन को कॉल करता है, निर्देश से नियंत्रक तक डेटा पारित कर सकता है।

Answer 5

निर्देशों पर AngularJS प्रलेखन बहुत अच्छी तरह से प्रतीकों क्या मतलब के लिए लिखा है।

स्पष्ट होने के लिए, आपके पास बस नहीं हो सकता

scope: '@'

एक निर्देशक परिभाषा में। आपके पास वे गुण होने चाहिए जिनके लिए वे बाइंडिंग लागू होते हैं:

scope: {
    myProperty: '@'
}

मैं दृढ़ता से सुझाव देता हूं कि आप साइट पर प्रलेखन और ट्यूटोरियल पढ़ें। अलग-अलग स्कोप और अन्य विषयों के बारे में आपको और अधिक जानकारी होनी चाहिए।

यहाँ उपरोक्त लिंक से एक सीधा उद्धरण दिया गया है, के मूल्यों के बारे में scope:

स्कोप प्रॉपर्टी सही हो सकती है, एक ऑब्जेक्ट या एक मिथ्या मूल्य:

• मिथ्या : निर्देश के लिए कोई गुंजाइश नहीं बनाई जाएगी। निर्देश अपने माता-पिता के दायरे का उपयोग करेगा।

• true: एक नया चाइल्ड स्कोप जो अपने माता-पिता से प्रोटोटाइपिक रूप से विरासत में मिला है, निर्देश के तत्व के लिए बनाया जाएगा। यदि एक ही तत्व पर कई निर्देश एक नए दायरे का अनुरोध करते हैं, तो केवल एक नया क्षेत्र निर्मित होता है। नया स्कोप नियम टेम्पलेट की जड़ के लिए लागू नहीं होता है क्योंकि टेम्प्लेट की जड़ को हमेशा एक नया स्कोप मिलता है।

• {...} (एक वस्तु हैश) : निर्देश के तत्व के लिए एक नया "पृथक" क्षेत्र बनाया गया है। The आइसोलेट ’का दायरा सामान्य दायरे से अलग होता है क्योंकि यह मूल रूप से अपने मूल दायरे से विरासत में नहीं मिलता है। पुन: प्रयोज्य घटकों का निर्माण करते समय यह उपयोगी है, जिन्हें गलती से माता-पिता के दायरे में डेटा को पढ़ना या संशोधित नहीं करना चाहिए।

^{Https://code.angularjs.org/1.4.11/docs/api/ng/service/ $ संकलन # -स्कोप- से पुनर्प्राप्त 2017-02-13 , CC-by-SA 3.0 के रूप में लाइसेंस प्राप्त}

Answer 6

मुझे AngularJS 1.6 में किसी भी प्रतीक के साथ एक मूल्य को बांधने में परेशानी हुई। मुझे बिल्कुल भी कोई मूल्य नहीं मिला, केवल undefined, भले ही मैंने इसे उसी तरह से ठीक उसी तरह से किया जैसे कि एक ही फाइल में अन्य बाइंडिंग ने काम किया।

समस्या यह थी: मेरे चर नाम में एक अंडरस्कोर था।

यह विफल रहता है:

bindings: { import_nr: '='}

यह काम:

bindings: { importnr: '='}

(मूल प्रश्न से पूरी तरह से संबंधित नहीं है, लेकिन जब मैंने देखा तो यह शीर्ष खोज परिणामों में से एक था, इसलिए उम्मीद है कि यह उसी समस्या से किसी को मदद करता है।)