AngularJS में निर्देशात्मक दायरे में '@' और '=' के बीच क्या अंतर है?

1067

मैंने इस विषय पर AngularJS प्रलेखन को ध्यान से पढ़ा है , और फिर एक निर्देश के साथ चारों ओर फिड किया है। यहाँ की बेला है ।

और यहाँ कुछ प्रासंगिक स्निपेट हैं:

से एचटीएमएल :

<pane bi-title="title" title="{{title}}">{{text}}</pane>

फलक निर्देश से:

scope: { biTitle: '=', title: '@', bar: '=' },

कई चीजें हैं जो मुझे नहीं मिलती हैं:

मुझे क्यों और किसके "{{title}}"साथ उपयोग करना है ?'@'"title"'='
क्या मैं एक तत्व के साथ अपने तत्व को सजाने के बिना, सीधे माता-पिता के दायरे तक पहुंच सकता हूं?
दस्तावेज़ीकरण कहता है "अक्सर अभिव्यक्ति के माध्यम से और मूल दायरे में डेटा को पास करना वांछनीय है" , लेकिन यह द्विदिश बाध्यकारी के साथ ठीक काम करने के लिए भी लगता है। अभिव्यक्ति का मार्ग बेहतर क्यों होगा?

मुझे एक और फिडेल मिला जो अभिव्यक्ति समाधान भी दिखाता है: http://jsfiddle.net/maxisam/QrCXh/

— iwein
स्रोत

18

निष्पक्ष बिंदु। शोध करने और उत्तर खोजने की क्षमता महत्वपूर्ण है।

— जोनाथन

1

stackoverflow.com/questions/14908133/…

— zloctb

1

सरल शब्दों =में दो अलग-अलग बाइंडिंग को सक्षम करने के लिए डायरेक्टिव आइसोलेटेड स्कोप में उपयोग किया जाता है और @मॉडल को अपडेट नहीं करता है, केवल डाइरेक्टिव स्कोप मानों को अपडेट करता है।

— इस्पात

@iwein jsfiddle.net/maxisam/QrCXh पर आपका फिडल कोड googleapi - ajax.googleapis.com/ajax/libs/angularj//1.4.8/angular.min.js के साथ काम क्यों नहीं करता है ? आपका कोड तभी काम करता है जब मैं आपके cdn - code.angularjs.org/1.0.1/angular-1.0.1.js

— MukulSharma

मुझे नीचे बहुत सारे अच्छे उत्तर दिखाई देते हैं, लेकिन क्या कोई आधिकारिक कोणीय दस्तावेज के लिए कोई संकेत दे सकता है जो इस प्रश्न का उत्तर देता है?

— जॉन हेन्केल

1151

मुझे " @ " के साथ "{{शीर्षक}}" और " = " के साथ "शीर्षक" का उपयोग क्यों करना है ?

@ डोम विशेषता के मूल्यांकन मूल्य के लिए एक स्थानीय / निर्देश गुंजाइश संपत्ति बांधता है । यदि आप उपयोग करते हैं title=title1या title="title1", DOM विशेषता "शीर्षक" का मान केवल स्ट्रिंग है title1। यदि आप उपयोग करते हैं title="{{title}}", तो DOM विशेषता "शीर्षक" का मान प्रक्षेपित मूल्य है {{title}}, इसलिए वर्तमान में जो भी मूल पैतृक संपत्ति "शीर्षक" है वह स्ट्रिंग होगी। चूँकि विशेषता मान हमेशा तार होते हैं, आप हमेशा @ का उपयोग करते समय निर्देश के दायरे में इस गुण के लिए एक स्ट्रिंग मान के साथ समाप्त करेंगे ।

= स्थानीय / निर्देश क्षेत्र की संपत्ति को मूल दायरे की संपत्ति में बांधता है । तो = के साथ , आप DOM विशेषता के मान के रूप में मूल मॉडल / स्कोप गुण नाम का उपयोग करते हैं। आप = के{{}} साथ का उपयोग नहीं कर सकते ।

@ के साथ, आप ऐसा कर सकते हैं title="{{title}} and then some"- {{शीर्षक}} इंटरपोलित है, फिर स्ट्रिंग "और उन्हें कुछ" इसके साथ समाहित किया गया है। अंतिम समाप्‍त स्ट्रिंग वह है जो लोकल / डायरेक्‍टिव स्कोप प्रॉपर्टी को मिलती है। (आप = , केवल @ के साथ ऐसा नहीं कर सकते ।)

@ के साथ , आपको उपयोग करने की आवश्यकता होगी attr.$observe('title', function(value) { ... })यदि आपको अपने लिंक (आईएनजी) फ़ंक्शन में मूल्य का उपयोग करने की आवश्यकता है। जैसे, if(scope.title == "...")आप अपेक्षा के अनुरूप काम नहीं करेंगे। ध्यान दें कि इसका मतलब है कि आप केवल इस विशेषता को अतुल्यकालिक रूप से एक्सेस कर सकते हैं । यदि आप केवल एक टेम्पलेट में मूल्य का उपयोग कर रहे हैं, तो आपको $ अवलोकन का उपयोग करने की आवश्यकता नहीं है। जैसे template: '<div>{{title}}</div>',।

= के साथ , आपको $ अवलोकन का उपयोग करने की आवश्यकता नहीं है।

क्या मैं एक तत्व के साथ अपने तत्व को सजाने के बिना, सीधे माता-पिता के दायरे तक पहुंच सकता हूं?

हां, लेकिन केवल अगर आप एक अलग दायरे का उपयोग नहीं करते हैं। इस लाइन को अपने निर्देश से हटा दें

scope: { ... }

और तब आपका निर्देश एक नया दायरा नहीं बनाएगा। इसमें पैरेंट स्कोप का इस्तेमाल होगा। फिर आप सीधे पैरेंट स्कोप के सभी गुणों को एक्सेस कर सकते हैं।

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

हां, द्विदिश बाध्यकारी स्थानीय / प्रत्यक्ष गुंजाइश और डेटा साझा करने के लिए मूल गुंजाइश की अनुमति देता है। "एक्सप्रेशन बाइंडिंग" निर्देश एक DOM विशेषता द्वारा परिभाषित अभिव्यक्ति (या फ़ंक्शन) को कॉल करने की अनुमति देता है - और आप डेटा को अभिव्यक्ति या फ़ंक्शन के तर्क के रूप में भी पास कर सकते हैं। इसलिए, यदि आपको माता-पिता के साथ डेटा साझा करने की आवश्यकता नहीं है - आप केवल मूल कार्यक्षेत्र में परिभाषित फ़ंक्शन को कॉल करना चाहते हैं - आप & सिंटैक्स का उपयोग कर सकते हैं ।

यह सभी देखें

लुकास का अलग-अलग स्कोप ब्लॉग पोस्ट (@, =, और) को कवर करता है
dnc253 की @ और = की व्याख्या
स्कोप के बारे में मेरा ब्लॉग जैसा उत्तर - निर्देश अनुभाग (नीचे सारांश अनुभाग से पहले का रास्ता) में एक अलग गुंजाइश की तस्वीर है और इसका मूल दायरा है - निर्देश का दायरा एक संपत्ति के लिए @ और दूसरे के लिए = का उपयोग करता है
AngularJS में & बनाम @ और = के बीच क्या अंतर है

— राज रजोक
स्रोत

1

हुह, यह वास्तव में अजीब व्यवहार है, खासकर जब प्रक्षेप का उपयोग नहीं कर रहा है और बस एक स्ट्रिंग को पारित करने की कोशिश कर रहा है। जाहिरा तौर पर पुल अनुरोध वास्तव में विकास बिल्ड में विलय कर दिया गया है और 1.1.5 और 1.2.0 आरसी बिल्ड में है। इस बहुत ही अनपेक्षित व्यवहार को ठीक करने के लिए उन पर अच्छा!

— इब्राहिम

50

Writing @ ’या '=’ लिखना इतना अधिक स्पष्ट है, फिर “इवेल-डोम” या “पैरेंट-स्कोप” या किसी अन्य मानव-पठनीय पाठ को लिखना। अच्छा डिजाइन निर्णय।

— डेन

13

@('एट') 'एट्रिब्यूट' के मूल्य को कॉपी करता है। =('बराबर') यह कहने के बराबर है कि कुंजी आपकी अभिव्यक्ति के बराबर है। यह, कम से कम, यह है कि मैं उन्हें कैसे रोकता हूं।

— मैट डेके

1

क्या आप सुनिश्चित हैं कि = केवल पैरेंट-स्कोप गुण के लिए है? कोई भी अभिव्यक्ति काम करने लगती है - न केवल अभिभावक-गुंजाइश गुण।

— जोनाथन एक्विनो

4

@JonathanAquino, हाँ जो काम करता है, लेकिन @ अधिक उपयुक्त होगा foo="{{1+1}}"- क्योंकि - हमें यहाँ दो-तरफ़ा डेटा बाइंडिंग की आवश्यकता नहीं है। जिस बिंदु पर मैंने ऊपर टिप्पणी करने की कोशिश की, वह यह है कि हमें = का उपयोग तब करना चाहिए जब निर्देश को दो-तरफ़ा डेटा बाइंडिंग की आवश्यकता हो। @ या अन्यथा का उपयोग करें।

— मार्क राजकॉक

542

वहाँ महान जवाब का एक बहुत यहाँ हैं, लेकिन मैं के बीच मतभेद पर अपने दृष्टिकोण की पेशकश करना चाहते हैं @, =और &बाध्यकारी मेरे लिए उपयोगी साबित कर दिया कि।

सभी तीन बाइंडिंग तत्व की विशेषताओं के माध्यम से आपके निर्देश के पृथक दायरे में आपके मूल दायरे से डेटा पास करने के तरीके हैं:

@ बंधन तार गुजरने के लिए है। ये तार {{}}प्रक्षेपित मूल्यों के लिए अभिव्यक्ति का समर्थन करते हैं। उदाहरण के लिए: । प्रक्षेपित अभिव्यक्ति का मूल्यांकन निर्देशक के मूल क्षेत्र के विरुद्ध किया जाता है।

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

& बाइंडिंग आपके निर्देश के दायरे में एक विधि पारित करने के लिए है ताकि इसे आपके निर्देश के भीतर कहा जा सके। विधि निर्देश के मूल दायरे से पूर्व-बाध्य है, और तर्कों का समर्थन करती है। उदाहरण के लिए, यदि विधि पैरेंट स्कोप में हेल्लो (नाम) है, तो अपने निर्देश के अंदर से विधि को निष्पादित करने के लिए, आपको $ स्कोप को कॉल करना होगा। हेलो ({नाम: 'दुनिया'})

मुझे लगता है कि इन अंतरों को छोटे विवरण द्वारा गुंजाइश बाँधने के संदर्भ में याद रखना आसान है:

@ स्ट्रिंग बाइंडिंग को अट्रैक्ट करें
= दो-तरफा मॉडल बाइंडिंग
& कॉलबैक विधि बाइंडिंग

प्रतीक यह भी स्पष्ट करते हैं कि गुंजाइश चर आपके निर्देश के कार्यान्वयन के अंदर क्या दर्शाता है:

@ तार
= नमूना
& तरीका

उपयोगिता के क्रम में (मेरे लिए वैसे भी):

=
@
और

— pixelbits
स्रोत

13

दरअसल, "&"फॉर्म के तर्कों (या, बल्कि, स्थानीय लोगों) का समर्थन करता है: callback({foo: "some value"})जो तब उपयोग किया जा सकता था <my-dir callback="doSomething(foo)">। अन्यथा, अच्छा उत्तर

— न्यू देव

11

उत्तर स्वीकार किया जाना चाहिए। यहां समान जानकारी के साथ एक संक्षिप्त लेख है, लेकिन अतिरिक्त कोड उदाहरणों के साथ: umur.io/…

— केविन

4

& "कॉलबैक विधि बाध्यकारी" नहीं है, यह कोणीय अभिव्यक्ति बंधन है। एक विशेष लेकिन एकमात्र उदाहरण अभिव्यक्ति नहीं है callback(argument)। जो आज भी callbackअपने आप जैसा नहीं है।

— दिमित्री जैतसेव

14

जबकि मुझे लगा कि उच्च रैंकिंग उत्तर कितना निश्चित था, मैंने पाया कि यह एक अधिक उपयोगी प्रभाव है और इसे पढ़ने के बाद मैंने पिछले उत्तर को और अधिक समझा।

— रब्नजैडवे

1

मैं उपरोक्त टिप्पणी से सहमत हूं, यह उत्तर प्रश्न के लिए अधिक स्पष्ट, निश्चित और उपयोगी है। यह पर्याप्त विस्तार से बताता है कि आप जानकारी का उपयोग कर सकते हैं।

— user3125823

64

=द्वि-दिशात्मक बाइंडिंग का अर्थ है, इसलिए माता-पिता के दायरे के लिए एक चर का संदर्भ। इसका मतलब है, जब आप निर्देश में परिवर्तनशील परिवर्तन करते हैं, तो इसे मूल रूप में भी बदल दिया जाएगा।

@ इसका मतलब है कि चर को निर्देशन में कॉपी (क्लोन) किया जाएगा।

जहां तक मुझे पता है, <pane bi-title="{{title}}" title="{{title}}">{{text}}</pane>काम भी करना चाहिए। bi-titleपैरेंट स्कोप वैरिएबल मान प्राप्त करेगा, जिसे निर्देश में बदला जा सकता है।

यदि आपको मूल दायरे में कई चर बदलने की आवश्यकता है, तो आप निर्देश के भीतर (या किसी सेवा के माध्यम से डेटा पास) से मूल कार्यक्षेत्र पर कार्य निष्पादित कर सकते हैं।

— asgoth
स्रोत

1

हां, वह हिस्सा मुझे मिलता है, प्रश्न में फिडेल देखें। लेकिन उन हिस्सों के बारे में क्या है जो अस्पष्ट हैं?

— Iwein

4

बात यह है कि {{}} के साथ काम नहीं करता है =। = का मूल्यांकन नहीं किया जाता है, लेकिन स्ट्रिंग को संपत्ति के नाम के रूप में लिया जाता है। जवाब के लिए धन्यवाद!

— 13

1

मुझे नहीं लगता कि = माता-पिता के दायरे में केवल चर के लिए है। यह किसी भी अभिव्यक्ति के साथ काम करता है (जैसे, 1 + 1)।

— जोनाथन एक्विनो

1

@JonathanAquino आप सही हैं कि यह भावों का मूल्यांकन करता है। Imho यह वास्तव में अजीब है और मैं इसे इस तरह से उपयोग नहीं करेगा। यह इस तरह की चालाक चालें हैं जो पहली बार में समझने के लिए निर्देशात्मक ढलान को इतना कठिन बनाती हैं।

— इविन

1

क्या मैं अकेला हूँ जो इस उत्तर को गलत समझता हूँ! '=' का मतलब कोणीय एक जावास्क्रिप्ट अभिव्यक्ति की उम्मीद करता है और यदि एक गुंजाइश चर पारित किया जाता है तो वह एक अप्रत्यक्ष मानचित्रण करेगा। जबकि @ माध्य कोणीय एक स्ट्रिंग की उम्मीद करता है और वह सब। वास्तव में, यह सच है कि अगर आप {@}} के साथ कॉम्बिनासन में @ का उपयोग करते हैं, तो आप वेरिएबल का मान क्लोन करेंगे। लेकिन यह @ की परिभाषा नहीं है!

— ल्यूक ड्यूजन

39

यदि आप अधिक देखना चाहते हैं कि यह एक जीवंत उदाहरण के साथ कैसे काम करता है। http://jsfiddle.net/juanmendez/k6chmnch/

var app = angular.module('app', []);
app.controller("myController", function ($scope) {
    $scope.title = "binding";
});
app.directive("jmFind", function () {
    return {
        replace: true,
        restrict: 'C',
        transclude: true,
        scope: {
            title1: "=",
            title2: "@"
        },
        template: "<div><p>{{title1}} {{title2}}</p></div>"
    };
});

— जुआन मेंडेज़
स्रोत

2

प्रश्न और शीर्ष उत्तर में कई उदाहरण जुड़े हुए हैं। इससे क्या जुड़ता है?

— इविन

10

@ आईविन, यह स्पष्टता जोड़ता है। यदि मैं पूर्ण-विशेषताओं वाले उदाहरणों को समझ और आत्मसात कर सकता हूं, तो मुझे इस साइट की आवश्यकता नहीं होगी।

— टोनी एनिस

3

जुआन, शायद अपने टाइपो को ठीक करें? c ट्रांसक्लूड ’गलत वर्तनी है। बेहतर अभी तक, इसे हटा दें (और बाकी सब, जैसे 'प्रतिस्थापित') समस्या में सीधे योगदान नहीं करता है, इसलिए आपका समाधान और भी सरल और स्पष्ट है। उदाहरण के लिए +1।

— टोनी एनिस

धन्यवाद @AnikISlamAbhi संपादन के लिए। मैं और अधिक योगदान करना चाहता हूं और मुझे खुशी है कि कुछ लोग मेरे नमूने को उपयोगी पाते हैं। यही मुख्य उद्देश्य है।

— जुआन मेंडेज़

अधूरा उदाहरण। आपके प्रदर्शन में, आप केवल द्वि-दिशात्मक मूल्य बदल रहे हैं। आप मूल्य को बदलने की कोशिश भी नहीं कर रहे हैं जिसमें अलग-थलग गुंजाइश है। इसलिए, यह ठीक से प्रदर्शित नहीं करता है कि निर्देशों में गुंजाइश कैसे काम करती है।

— Sudarshan_SMD

38

@ स्ट्रिंग के रूप में मिलता है

इससे कोई भी बंधन नहीं बनता है। आप बस एक स्ट्रिंग के रूप में पारित शब्द प्राप्त कर रहे हैं

= 2 तरह से बाध्यकारी

नियंत्रक से किए गए परिवर्तन निर्देश द्वारा आयोजित संदर्भ में परिलक्षित होंगे, और इसके विपरीत

&यह थोड़ा अलग ढंग से व्यवहार करता है, क्योंकि गुंजाइश को एक फ़ंक्शन मिलता है जो उस वस्तु को वापस करता है जो इसमें पारित किया गया था । मैं यह मान रहा हूँ कि यह काम करने के लिए आवश्यक था। फिडेल को यह स्पष्ट करना चाहिए।

इस गेटर फ़ंक्शन को कॉल करने के बाद, परिणामी वस्तु निम्नानुसार व्यवहार करती है:
- यदि कोई फ़ंक्शन पास किया गया था: तो फ़ंक्शन को पैरेंट (कंट्रोलर) क्लोजर में निष्पादित किया जाता है जब बुलाया जाता है
- यदि कोई गैर-फ़ंक्शन पास किया गया था: बस उस ऑब्जेक्ट की स्थानीय प्रतिलिपि प्राप्त करें जिसमें कोई बाइंडिंग नहीं है

इस फिडेल को प्रदर्शित करना चाहिए कि वे कैसे काम करते हैं । get...नाम के साथ कार्य के फंक्शन्स पर विशेष ध्यान दें&

— GEG
स्रोत

36

निर्देश में तीन तरीके जोड़े जा सकते हैं:

पैरेंट स्कोप : यह डिफॉल्ट स्कोप इनहेरिटेंस है।

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

चाइल्ड स्कोप : डायरेक्शन चाइल्ड स्कोप बनाता है जो पेरेंट स्कोप से इनहेरिट करता है यदि आप डायरेक्शन के स्कोप वैरिएबल को सही मानते हैं।

यहां, यदि आप निर्देश के अंदर स्कोप वैरिएबल बदलते हैं, तो यह पेरेंट स्कोप में परिलक्षित नहीं होगा, लेकिन यदि आप स्कोप वैरिएबल की प्रॉपर्टी को बदलते हैं, जो कि पेरेंट स्कोप में परिलक्षित होता है, जैसा कि आपने वास्तव में पेरेंट के स्कोप वैरिएबल में बदलाव किया है ।

उदाहरण,

app.directive("myDirective", function(){

    return {
        restrict: "EA",
        scope: true,
        link: function(element, scope, attrs){
            scope.somvar = "new value"; //doesnot reflect in the parent scope
            scope.someObj.someProp = "new value"; //reflects as someObj is of parent, we modified that but did not override.
        }
    };
});

आइसोलेटेड स्कोप : इसका उपयोग तब किया जाता है जब आप वह स्कोप बनाना चाहते हैं जो कंट्रोलर स्कोप से इनहेरिट न हो।

ऐसा तब होता है जब आप प्लगइन्स बना रहे होते हैं क्योंकि यह डायरेक्टिव जेनेरिक बनाता है क्योंकि इसे किसी भी HTML में रखा जा सकता है और इसके पैरेंट स्कोप से प्रभावित नहीं होता है।

अब, यदि आप मूल दायरे के साथ कोई इंटरैक्शन नहीं चाहते हैं, तो आप बस खाली वस्तु के रूप में गुंजाइश निर्दिष्ट कर सकते हैं। पसंद,

scope: {} //this does not interact with the parent scope in any way

अधिकतर यह मामला नहीं है, क्योंकि हमें अभिभावक के दायरे के साथ कुछ सहभागिता की आवश्यकता होती है, इसलिए हम चाहते हैं कि कुछ मान / परिवर्तन गुजरें। इस कारण से, हम उपयोग करते हैं:

1. "@"   (  Text binding / one-way binding )
2. "="   ( Direct model binding / two-way binding )
3. "&"   ( Behaviour binding / Method binding  )

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

@ हमेशा अभिव्यक्ति के लिए मैप की गई विशेषता की अपेक्षा करता है। यह बहुत महत्वपूर्ण है; "@" उपसर्ग कार्य करने के लिए, हमें {{}} के अंदर विशेषता मान को लपेटना होगा।

= द्विदिश है इसलिए यदि आप चर को निर्देश क्षेत्र में बदलते हैं, तो नियंत्रक गुंजाइश चर भी प्रभावित होता है

& कंट्रोलर स्कोप मेथड को बांधने के लिए उपयोग किया जाता है ताकि जरूरत पड़ने पर हम इसे निर्देश से बुला सकें

यहाँ लाभ यह है कि चर का नाम नियंत्रक दायरे और निर्देशकीय दायरे में समान नहीं होना चाहिए।

उदाहरण के लिए, निर्देश क्षेत्र में एक चर "dirVar" होता है, जो नियंत्रक क्षेत्र के चर "contVar" के साथ होता है। यह निर्देश को बहुत अधिक शक्ति और सामान्यीकरण देता है क्योंकि एक नियंत्रक चर v1 के साथ सिंक कर सकता है जबकि एक ही निर्देशक का उपयोग करने वाला एक अन्य नियंत्रक dirVar को चर v2 के साथ सिंक करने के लिए कह सकता है।

नीचे उपयोग का उदाहरण है:

निर्देश और नियंत्रक हैं:

 var app = angular.module("app", []);
 app.controller("MainCtrl", function( $scope ){
    $scope.name = "Harry";
    $scope.color = "#333333";
    $scope.reverseName = function(){
     $scope.name = $scope.name.split("").reverse().join("");
    };
    $scope.randomColor = function(){
        $scope.color = '#'+Math.floor(Math.random()*16777215).toString(16);
    };
});
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: {
            name: "@",
            color: "=",
            reverse: "&"
        },
        link: function(element, scope, attrs){
           //do something like
           $scope.reverse(); 
          //calling the controllers function
        }
    };
});

और HTML (@ और = के लिए अंतर को नोट करें):

<div my-directive
  class="directive"
  name="{{name}}"
  reverse="reverseName()"
  color="color" >
</div>

यहाँ उस ब्लॉग का लिंक दिया गया है जो इसे अच्छी तरह से बताता है।

— Kop4lyf
स्रोत

& न तो "व्यवहार बंधन" है और न ही "विधि बंधन", यह कोणीय अभिव्यक्ति बंधन है।

— दिमित्री ज़ैतसेव

20

बस हम उपयोग कर सकते हैं: -

@ : - एक तरह से डेटा बाइंडिंग के लिए स्ट्रिंग मान। एक तरह से डेटा बाइंडिंग आप केवल निर्देश मान के लिए स्कोप मान पास कर सकते हैं
= : - दो तरह से डेटा बाइंडिंग के लिए ऑब्जेक्ट वैल्यू के लिए। दो तरह से डेटा बाइंडिंग आप निर्देशांक में गुंजाइश मान के साथ-साथ HTML में भी बदल सकते हैं।
& : - विधियों और कार्यों के लिए।

संपादित करें

कोणीय संस्करण 1.5 और इसके बाद के संस्करण के लिए हमारी घटक परिभाषा में चार अलग-अलग प्रकार के बाइंडिंग हैं:

= दो-तरफ़ा डेटा बाइंडिंग : - यदि हम मान बदलते हैं, तो यह स्वचालित रूप से अपडेट हो जाता है
< एक तरह से बाध्यकारी : - जब हम सिर्फ एक मूल पैरामीटर से एक पैरामीटर पढ़ना चाहते हैं और इसे अपडेट नहीं करते हैं।
@यह स्ट्रिंग पैरामीटर्स के लिए है
&यह कॉलबैक के लिए है यदि आपके घटक को अपने मूल क्षेत्र में कुछ उत्पादन करने की आवश्यकता है

— ओजस कुलकर्णी
स्रोत

13

मैंने एक छोटी सी HTML फ़ाइल बनाई है जिसमें उनके बीच के अंतरों को प्रदर्शित करने वाला कोणीय कोड है:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  </head>
  <body ng-app="myApp">
    <div ng-controller="myCtrl as VM">
      <a my-dir
        attr1="VM.sayHi('Juan')" <!-- scope: "=" -->
        attr2="VM.sayHi('Juan')" <!-- scope: "@" -->
        attr3="VM.sayHi('Juan')" <!-- scope: "&" -->
      ></a>
    </div>
    <script>
    angular.module("myApp", [])
    .controller("myCtrl", [function(){
      var vm = this;
      vm.sayHi = function(name){
        return ("Hey there, " + name);
      }
    }])
    .directive("myDir", [function(){
      return {
        scope: {
          attr1: "=",
          attr2: "@",
          attr3: "&"
        },
        link: function(scope){
          console.log(scope.attr1);   // =, logs "Hey there, Juan"
          console.log(scope.attr2);   // @, logs "VM.sayHi('Juan')"
          console.log(scope.attr3);   // &, logs "function (a){return h(c,a)}"
          console.log(scope.attr3()); // &, logs "Hey there, Juan"
        }
      }
    }]);
    </script>
  </body>
</html>

— RobertAKARobin
स्रोत

6

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

इसे और अधिक स्पष्ट रूप से प्राप्त करने के लिए, आप इस महान लेख का उपयोग कर सकते हैं:

AngularJS डायरेक्टिव स्कोप '@' और '='

— हज़ारपते तुनयान
स्रोत

6

यह सवाल पहले ही मौत के घाट उतार दिया गया है, लेकिन मैं इसे किसी और मामले में साझा करूंगा जब तक कोई और उस भयानक गड़बड़झाले से नहीं जूझता जो अंगुलियृज स्कूप है। इस इच्छा को कवर =, <, @, &और ::। पूरा लेखन यहाँ पाया जा सकता है ।

=एक दो तरह से बंधन स्थापित करता है। माता-पिता में संपत्ति बदलने से बच्चे में परिवर्तन होगा, और इसके विपरीत।

<एक तरह से बाध्यकारी, बच्चे को माता-पिता स्थापित करता है। माता-पिता में संपत्ति बदलने से बच्चे में बदलाव आएगा, लेकिन बाल संपत्ति को बदलने से मूल संपत्ति प्रभावित नहीं होगी।

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

<child-component description="The movie title is {{$ctrl.movie.title}}" />

bindings: {
    description: '@', 
}

यहां, descriptionबच्चे के दायरे में संपत्ति अभिव्यक्ति का वर्तमान मूल्य होगा "The movie title is {{$ctrl.movie.title}}", जहां movieमाता-पिता के दायरे में एक वस्तु है।

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

<child-component 
  foo = "myVar + $ctrl.parentVar + myOtherVar"
</child-component>

angular.module('heroApp').component('childComponent', {
  template: "<div>{{  $ctrl.parentFoo({myVar:5, myOtherVar:'xyz'})  }}</div>",
  bindings: {
    parentFoo: '&foo'
  }
});

यह देखते हुए parentVar=10, अभिव्यक्ति parentFoo({myVar:5, myOtherVar:'xyz'})का मूल्यांकन होगा 5 + 10 + 'xyz'और घटक इस प्रकार प्रस्तुत करेगा:

<div>15xyz</div>

आप कब इस जटिल कार्यक्षमता का उपयोग करना चाहेंगे? &अक्सर लोगों द्वारा माता-पिता के दायरे में कॉलबैक फ़ंक्शन को पास करने के लिए लोगों द्वारा उपयोग किया जाता है। वास्तव में, हालांकि, फ़ंक्शन को पारित करने के लिए '<' का उपयोग करके वही प्रभाव प्राप्त किया जा सकता है, जो अधिक सीधा है और मापदंडों ( {myVar:5, myOtherVar:'xyz'}) को पारित करने के लिए अजीब घुंघराले ब्रेस सिंटैक्स से बचा जाता है । विचार करें:

कॉलबैक का उपयोग कर &:

<child-component parent-foo="$ctrl.foo(bar)"/>

angular.module('heroApp').component('childComponent', {
  template: '<button ng-click="$ctrl.parentFoo({bar:'xyz'})">Call foo in parent</button>',
  bindings: {
    parentFoo: '&'
  }
});

कॉलबैक का उपयोग कर <:

<child-component parent-foo="$ctrl.foo"/>

angular.module('heroApp').component('childComponent', {
  template: '<button ng-click="$ctrl.parentFoo('xyz')">Call foo in parent</button>',
  bindings: {
    parentFoo: '<'
  }
});

ध्यान दें कि वस्तुओं (और सरणियों) को बाल दायरे के संदर्भ में पारित किया जाता है, कॉपी नहीं किया जाता है। इसका मतलब यह है कि भले ही यह एकतरफा बाध्यकारी हो, आप माता-पिता और बच्चे दोनों के दायरे में एक ही वस्तु के साथ काम कर रहे हैं।

कार्रवाई में विभिन्न उपसर्गों को देखने के लिए, इस प्लंक को खोलें ।

एक बार के बंधन (प्रारंभिक) का उपयोग करना ::

[आधिकारिक डॉक्स]
AngularJS के बाद के संस्करणों में एक बार की बाध्यता के विकल्प का परिचय दिया गया है, जहां केवल एक बार ही चाइल्ड स्कोप प्रॉपर्टी को अपडेट किया जाता है। यह मूल संपत्ति को देखने की आवश्यकता को समाप्त करके प्रदर्शन में सुधार करता है। वाक्य रचना ऊपर से अलग है; एक बार के बंधन को घोषित करने के लिए, आप घटक टैग:: में अभिव्यक्ति के सामने जोड़ते हैं :

<child-component 
  tagline = "::$ctrl.tagline">
</child-component>

यह taglineएक-तरफ़ा या टू-वे बाइंडिंग की स्थापना के बिना चाइल्ड स्कोप के मान का प्रचार करेगा । ध्यान दें : यदि taglineशुरू undefinedमें मूल दायरे में है, तो कोणीय इसे तब तक देखेगा जब तक यह बदल नहीं जाता है और फिर बच्चे के दायरे में संबंधित संपत्ति का एक बार का अद्यतन करें।

सारांश

नीचे दी गई तालिका से पता चलता है कि संपत्ति, वस्तु, सरणी, स्ट्रिंग आदि के आधार पर उपसर्ग कैसे काम करते हैं।

विभिन्न आइसोलेटेड स्कोप बाइंडिंग कैसे काम करते हैं

— मिहेल कोस्तिरा
स्रोत

4

@ स्थानीय गुंजाइश संपत्ति का उपयोग स्ट्रिंग मानों को एक्सेस करने के लिए किया जाता है जो निर्देश के बाहर परिभाषित होते हैं।

= ऐसे मामलों में जहां आपको बाहरी दायरे और निर्देश के अलग-अलग दायरे के बीच दो-तरफ़ा बंधन बनाने की आवश्यकता होती है, आप = वर्ण का उपयोग कर सकते हैं।

& स्थानीय स्कोप प्रॉपर्टी एक निर्देश के उपभोक्ता को एक फ़ंक्शन में पारित करने की अनुमति देती है जो निर्देश को लागू कर सकता है।

कृपया नीचे दिए गए लिंक की जाँच करें जो आपको उदाहरणों के साथ स्पष्ट समझ देता है। मैंने पाया कि इसे साझा करने के बारे में बहुत उपयोगी है।

http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope

— राफेल
स्रोत

3

यहां तक कि जब गुंजाइश स्थानीय होती है, तो आपके उदाहरण के अनुसार, आप संपत्ति के माध्यम से मूल दायरे तक पहुंच सकते हैं $parent। नीचे दिए गए कोड में मान लें, जो titleमूल क्षेत्र पर परिभाषित किया गया है। आप तब शीर्षक का उपयोग कर सकते हैं $parent.title:

link : function(scope) { console.log(scope.$parent.title) },
template : "the parent has the title {{$parent.title}}"

हालांकि ज्यादातर मामलों में विशेषताओं का उपयोग करके समान प्रभाव बेहतर तरीके से प्राप्त किया जाता है।

एक उदाहरण जहां मुझे "&" नोटेशन मिला, जिसका उपयोग "एक अभिव्यक्ति के माध्यम से और मूल दायरे में डेटा को पास करने के लिए किया जाता है", उपयोगी (और दो-तरफ़ा डेटाबाइंडिंग का उपयोग नहीं किया जा सकता) एक निर्देश में था एनजी-रिपीट के अंदर एक विशेष डेटास्ट्रक्चर को प्रस्तुत करने के लिए।

<render data = "record" deleteFunction = "dataList.splice($index,1)" ng-repeat = "record in dataList" > </render>

रेंडरिंग का एक हिस्सा एक डिलीट बटन था और यहाँ बाहर के दायरे से & amp; डिलीट करने के लिए उपयोगी था। रेंडर-निर्देश के अंदर ऐसा दिखता है

scope : { data = "=", deleteFunction = "&"},
template : "... <button ng-click = "deleteFunction()"></button>"

2-वे डेटाबाइंडिंग का data = "="उपयोग नहीं किया जा सकता है क्योंकि डिलीट फ़ंक्शन हर $digestचक्र पर चलेगा , जो अच्छा नहीं है, क्योंकि रिकॉर्ड तब तुरंत हटा दिया जाता है और कभी रेंडर नहीं किया जाता है।

— user3750988
स्रोत

3

मैंने एक बेला में सभी संभावित विकल्पों को लागू किया।

यह सभी विकल्पों से संबंधित है:

scope:{
    name:'&'
},

scope:{
    name:'='
},

scope:{
    name:'@'
},

scope:{

},

scope:true,

https://jsfiddle.net/rishulmatta/v7xf2ujm

— रिशुल मटका
स्रोत

3

उनके बीच मुख्य अंतर बस है

@ Attribute string binding
= Two-way model binding
& Callback method binding

— आशीष कांबले
स्रोत

1

@और =अन्य जवाब देखें।

टीएल के बारे में एक गोच ; डीआर; हो जाता है अभिव्यक्ति एक माता पिता से और निर्देश में एक समारोह, कि अभिव्यक्ति कॉल के रूप में, यह सेट (अन्य उत्तर में उदाहरण की तरह न केवल समारोह)। और इस फ़ंक्शन में चर के साथ किसी ऑब्जेक्ट को पारित करके, अभिव्यक्ति के किसी भी चर (यहां तक कि फ़ंक्शन नाम) को बदलने की क्षमता है । &

&

समझाया गया
& एक अभिव्यक्ति संदर्भ है, इसका मतलब है कि यदि आप <myDirective expr="x==y"></myDirective>
निर्देश में कुछ पास करते हैं तो यह exprएक फ़ंक्शन होगा, जो अभिव्यक्ति को कॉल करता है, जैसे
function expr(){return x == y}:।
इसलिए निर्देशक के html <button ng-click="expr()"></button>में अभिव्यक्ति को कॉल किया जाएगा। निर्देश के js में बस $scope.expr()अभिव्यक्ति को भी कहेंगे।
एक्सप्रेशन को $ गुंजाइश.x और पेरेंट के $ स्कोप के साथ बुलाया जाएगा।
आपके पास मापदंडों को ओवरराइड करने की क्षमता है!
यदि आप उन्हें कॉल करके सेट करते हैं, उदाहरण के लिए, <button ng-click="expr({x:5})"></button>
तो अभिव्यक्ति को आपके पैरामीटर xऔर माता-पिता के पैरामीटर के साथ बुलाया जाएगा y।
आप दोनों को ओवरराइड कर सकते हैं।
अब आप जानते हैं, क्यों <button ng-click="functionFromParent({x:5})"></button>काम करता है।
क्योंकि यह सिर्फ अभिभावक की अभिव्यक्ति कहता है (उदाहरण के लिए)<myDirective functionFromParent="function1(x)"></myDirective>) और इस मामले में, आपके निर्दिष्ट मापदंडों के साथ संभव मानों को बदलता है x।
यह हो सकता है:
<myDirective functionFromParent="function1(x) + 5"></myDirective>
या
<myDirective functionFromParent="function1(x) + z"></myDirective>
चाइल्ड कॉल के साथ
<button ng-click="functionFromParent({x:5, z: 4})"></button>:।
या यहां तक कि फ़ंक्शन प्रतिस्थापन के साथ
<button ng-click="functionFromParent({function1: myfn, x:5, z: 4})"></button>:।

यह सिर्फ एक अभिव्यक्ति है, इससे कोई फर्क नहीं पड़ता कि यह एक फ़ंक्शन है, या कई फ़ंक्शन हैं, या बस तुलना करें। और आप इस अभिव्यक्ति के किसी भी चर को बदल सकते हैं ।

उदाहरण:
निर्देश टेम्पलेट बनाम बुलाया कोड:
: माता पिता $ scope.x, $ scope.y परिभाषित किया गया है
माता पिता टेम्पलेट: <myDirective expr="x==y"></myDirective>
<button ng-click="expr()"></button>कॉल $scope.x==$scope.y
<button ng-click="expr({x: 5})"></button>कॉल 5 == $scope.y
<button ng-click="expr({x:5, y:6})"></button>कॉल5 == 6

: माता पिता $ scope.function1, $ scope.x, $ scope.y परिभाषित किया गया है
माता पिता टेम्पलेट:<myDirective expr="function1(x) + y"></myDirective>

<button ng-click="expr()"></button>कॉल $scope.function1($scope.x) + $scope.y
<button ng-click="expr({x: 5})"></button>कॉल $scope.function1(5) + $scope.y
<button ng-click="expr({x:5, y:6})"></button>कॉल $scope.function1(5) + 6
निर्देश समारोह के रूप में $ scope.myFn है:
<button ng-click="expr({function1: myFn, x:5, y:6})"></button> कॉल$scope.myFn(5) + 6

— ya_dimon
स्रोत

0

मुझे "@" के साथ "{{शीर्षक}}" और "=" के साथ "शीर्षक" का उपयोग क्यों करना है?

जब आप {{शीर्षक}} का उपयोग करते हैं, तो केवल पैरेंट स्कोप वैल्यू को निर्देशन और मूल्यांकन के लिए पास किया जाएगा। यह एक तरह से सीमित है, जिसका अर्थ है कि परिवर्तन माता-पिता के दायरे में परिलक्षित नहीं होगा। आप '=' का उपयोग तब कर सकते हैं जब आप माता-पिता के दायरे में भी बच्चे के निर्देशन में किए गए परिवर्तनों को प्रतिबिंबित करना चाहते हैं। यह दो तरह से है।

क्या मैं एक तत्व के साथ अपने तत्व को सजाने के बिना, सीधे माता-पिता के दायरे तक पहुंच सकता हूं?

जब निर्देश में गुंजाइश विशेषता है (गुंजाइश: {}), तो आप अब सीधे माता-पिता के दायरे तक नहीं पहुंच पाएंगे। लेकिन फिर भी इसे गुंजाइश के माध्यम से एक्सेस करना संभव है। $ माता-पिता आदि। यदि आप निर्देश से गुंजाइश निकालते हैं, तो इसे सीधे एक्सेस किया जा सकता है।

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

यह संदर्भ पर आधारित है। यदि आप डेटा के साथ एक अभिव्यक्ति या कार्य को कॉल करना चाहते हैं, तो आप उपयोग करते हैं और यदि आप शेयर डेटा चाहते हैं, तो आप '=' का उपयोग करके द्विपदीय तरीके से उपयोग कर सकते हैं

आप नीचे दिए गए लिंक पर निर्देश देने के लिए डेटा पास करने के कई तरीकों के बीच अंतर पा सकते हैं:

AngularJS - पृथक स्कोप - @ बनाम = बनाम और

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

— प्रशांत
स्रोत

0

@ स्ट्रिंग बाइंडिंग (एक तरीका) = दो-तरफ़ा मॉडल बाइंडिंग और कॉलबैक विधि बाइंडिंग

— जतिन पटेल
स्रोत

0

@ डोम विशेषता के मूल्यांकन मूल्य के लिए एक स्थानीय / निर्देश गुंजाइश संपत्ति बांधता है। = एक स्थानीय / प्रत्यक्ष दायरे की संपत्ति को एक पैरेंट स्कोप प्रॉपर्टी से बांधता है। & बाइंडिंग आपके निर्देशन के दायरे में एक विधि पारित करने के लिए है ताकि इसे आपके निर्देश के भीतर कहा जा सके।

@ स्ट्रिंग बंधन बाँधना = दो तरफ़ा मॉडल बाइंडिंग और कॉलबैक विधि बाइंडिंग

— आशीष कांबले
स्रोत