दिलचस्प पोस्ट
एंड्रॉइड को समझना: ज़ीगोट और डेलविकम Jquery में लिपियों की तरह बाहरी सीएसएस फाइल लोड करें जो कि या तो में भी संगत है I NSMutableURL मेरी टाइमआउट अंतराल का पालन नहीं कर रहा है कक्षा में सभी फ़ंक्शन के लिए एक डेकोरेटर संलग्न करना प्रत्येक सदस्य के आकार के आकार के बराबर एक संरचना के लिए आकार क्यों नहीं है? एक चर नाम से पहले @ प्रतीक सी # में क्या मतलब है? जावा में घोषणा "डबल-चेक लॉकिंग टूटी हुई" घोषित करने के लिए कैसे करें? वार्गेंट का पोर्ट अग्रेषण काम नहीं कर रहा कस्टम फ़्रेम में Array.prototype जोड़ना पहले से तैयार की गई चीज़ों को प्रभावित किए बिना रंग बदलें एसएसआरएस अभिव्यक्ति शून्य त्रुटि द्वारा विभाजित WooCommerce: मेरे खाते पृष्ठों में एक कस्टम टेम्पलेट के लिए एक समापन बिंदु असाइन करना क्या x86 के MOV वास्तव में "मुफ़्त" हो सकता है? मैं इस सब पर पुन: उत्पन्न क्यों नहीं कर सकता हूं? मैं कैसे निर्धारित कर सकता हूं कि बार-बार विंडोज इंस्टालर के स्वयं-मरम्मत का क्या कारण है? उत्पत्ति http: // localhost: 3000 प्रवेश-नियंत्रण-अनुमति-मूल द्वारा अनुमति नहीं है

Angularjs के बारे में उलझन में अंतर और अलग-अलग स्कोप और बाइंडिंग

मैं उन निर्देशों के संबंध में मॉडल और उनके बाइंडिंग के दायरे को समझने के लिए संघर्ष कर रहा हूं जिनके पास सीमित अवसर हैं।

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

निम्नलिखित कोड लें (यहां बेला: http://jsfiddle.net/2ams6/ )

जावास्क्रिप्ट

var app = angular.module('app',[]); app.controller('Ctrl',function($scope){ }); app.directive('testel', function(){ return { restrict: 'E', scope: { title: '@' }, transclude: true, template: '<div ng-transclude>'+ '<h3>Template title: {{title}}</h3>' + '<h3>Template data.title:{{data.title}}</h3>' + '</div>' } }); 

एचटीएमएल

 <div ng-app='app'> <div ng-controller="Ctrl"> <input ng-model="data.title"> <testel title="{{data.title}}"> <h3>Transclude title:{{title}}</span></h3> <h3>Transclude data.title:{{data.title}}</h3> </testel> </div> </div> 

मॉडल केवल {{title}} टेम्पलेट के भीतर, और {{data.title}} को {{data.title}} करता है। क्यों नहीं {{title}} {{data.title}} और {{data.title}} टेम्पलेट में क्यों नहीं?

इस तरह के अंतराल के भीतर इनपुट को आगे बढ़ाना (यहां बेला: http://jsfiddle.net/eV8q8/1/ ):

 <div ng-controller="Ctrl"> <testel title="{{data.title}}"> <input ng-model="data.title"> <h3>Transclude title: <span style="color:red">{{title}}</span></h3> <h3>Transclude data.title: <span style="color:red">{{data.title}}</span></h3> </testel> </div> 

अब इसका अर्थ है कि केवल {{data:title}} को स्थानांतरित किया जाता है। {{data.title}} या {{data.title}} न तो टेम्पलेट क्यों न हों, या {{title}} भी नहीं स्थानांतरित {{title}} ?

और आखिरकार, इनपुट को टेम्पलेट के अंदर ले जा रहा है, जैसे (यहां बेला: http://jsfiddle.net/4ngmf/2/ ):

 template: '<div ng-transclude>' + '<input ng-model="data.title" />' + '<h3>Template title: {{title}}</h3>' + '<h3>Template data.title: {{data.title}}</h3>' + '</div>' 

अब इसका मतलब है कि केवल टेम्पलेट {{data.title}} को अपडेट किया जाता है। फिर, क्यों नहीं अन्य 3 बाइंडिंग?

मुझे उम्मीद है कि चेहरे पर मुझे घूरते हुए कुछ स्पष्ट है और मुझे यह याद आ रहा है। यदि आप मुझे यह प्राप्त करने के लिए मिलते हैं, तो मैं आपको बियर खरीद लूँगा, या आपको कुछ बिंदुओं, या कुछ अन्य चीज़ों को दे दूँगा। बहुत धन्यवाद।

Solutions Collecting From Web of "Angularjs के बारे में उलझन में अंतर और अलग-अलग स्कोप और बाइंडिंग"

आपकी फिदल्स तीन स्कोप बनाती हैं:

  1. ng-controller वजह से नियंत्रक Ctrl साथ जुड़े एक क्षेत्र
  2. ट्रांस्काइक्चर की वजह से एक डायरेक्टिविव ट्रांसपेक्टेड गुंजाइश है transclude: true
  3. गुंजाइश की वजह से एक निर्देश अलग-अलग scope: { ... }

Fiddle1 में, पाठ बॉक्स में कुछ भी टाइप करने से पहले हम निम्नलिखित हैं:

यहां छवि विवरण दर्ज करें

स्कोप 003 नियंत्रक से जुड़े क्षेत्र है। चूंकि हमने अभी तक टेक्स्टबॉक्स में टाइप नहीं किया है, इसलिए कोई data गुण नहीं है 004 अलग क्षेत्र में, हम देखते हैं कि एक title संपत्ति बनाई गई थी, लेकिन यह खाली है। यह खाली है क्योंकि माता पिता के पास एक data.title संपत्ति नहीं है।

टेक्स्ट बॉक्स में my title टाइप करने के बाद, अब हम हैं:

यहां छवि विवरण दर्ज करें

नियंत्रक क्षेत्र 003 में अब एक नया data ऑब्जेक्ट प्रॉपर्टी है (यही वजह है कि यह रंगीन पीला है), जिसकी title अब my title सेट की गई संपत्ति है। चूंकि स्कोप संपत्ति का title अलग है, data.title के इंटरपोलेटेड मान के लिए एक data.title , यह भी my title का मान (मूल्य का रंग पीला है क्योंकि यह बदल गया है)।

ट्रांस्क्लेक्टेड गुंजाइश प्रोटोटाइपिक रूप से नियंत्रक गुंजाइश से प्राप्त होती है, इसलिए ट्रांससाइंड एचटीएमएल के अंदर, कोणीय प्रोटोटाइप श्रृंखला का पालन कर सकता है और $scope.data.title में $scope.data.title पा सकता है (लेकिन $scope.title वहां मौजूद नहीं है)।

पृथक गुंजाइश का केवल अपने गुणों तक पहुंच है, इसलिए केवल संपत्ति का title

Fiddle2 में, टाइप करने से पहले हम एक ही तस्वीर के रूप में fiddle1 में है

my title टाइप करने के बाद:

यहां छवि विवरण दर्ज करें

नोटिस जहां नया data.title गुण दिखाया गया – data.title गुंजाइश पर। पृथक गुंजाइश अभी भी नियंत्रक क्षेत्र पर data.title तलाश में है, लेकिन यह इस समय नहीं है, इसलिए इसका title संपत्ति मूल्य खाली रहता है

Fiddle3 में, टाइप करने से पहले हम एक ही तस्वीर के रूप में fiddle1 में हैं

my title टाइप करने के बाद:

यहां छवि विवरण दर्ज करें

नोटिस जहां नई data.title संपत्ति को दिखाया गया – पृथक गुंजाइश पर। अन्य स्कोपों ​​में से कोई भी पृथक गुंजाइश का उपयोग नहीं करता है, इसलिए स्ट्रिंग my title कहीं और नहीं दिखाई देगा।


कोणीय v1.2 के लिए अद्यतन:

ईड 29 9 ए एंजलर के साथ अब ट्रांसजेक्शन से पहले ट्रांसजेक्शन प्वाइंट को साफ करता है, इसलिए Template title: ... और Template data.title: ... पार्ट्स तब तक नहीं दिखाएगा जब तक कि आप टेम्पलेट को संशोधित न कर दें, जैसे कि ng-transclude स्वतः ही है जैसा:

 '<h3>Template title: <span style="color:red">{{title}}</span></h3>' + '<h3>Template data.title: <span style="color:red">{{data.title}}</span></h3>' + '<div ng-transclude></div>' 

कोयोनर v1.3 के लिए नीचे अपडेट में, यह टेम्पलेट परिवर्तन किया गया था।


कोणीय v1.3 + के लिए अद्यतन:

कोणीय v1.3 के बाद से, पारस्परिक दायरे अब नियंत्रक क्षेत्र के एक बच्चे के बजाय डायरेक्टिव के पृथक गुंजाइश का बच्चा है। तो fiddle1 में, इससे पहले कि हम कुछ भी टाइप करें:

यहां छवि विवरण दर्ज करें

इस अद्यतन में चित्र पेरी $ दायरे उपकरण के साथ तैयार किए गए हैं, इसलिए चित्र थोड़ा अलग हैं @ इंगित करता है कि हमारे पास एक अलग स्कोप संपत्ति है जो @ सिंटैक्स का उपयोग करती है, और गुलाबी पृष्ठभूमि का अर्थ है कि उपकरण मैपिंग के लिए पूर्वजों का संदर्भ नहीं ढूंढ पा रहा था (जो कि सत्य है, क्योंकि हमने अभी तक टेक्स्टबॉक्स में कुछ भी नहीं टाइप किया है )।

टेक्स्ट बॉक्स में my title टाइप करने के बाद, अब हम हैं:

यहां छवि विवरण दर्ज करें

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

बेला 2 में, टाइप करने से पहले हमारे पास फिल्ड 1 जैसी तस्वीर है।

my title टाइप करने के बाद:

यहां छवि विवरण दर्ज करें

नोटिस जहां नया data.title गुण दिखाया गया – data.title गुंजाइश पर। पृथक गुंजाइश अभी भी नियंत्रक क्षेत्र पर data.title तलाश में है, लेकिन यह इस समय नहीं है, इसलिए इसका title संपत्ति मूल्य खाली रहता है

Fiddle3 में, टाइप करने से पहले हम एक ही तस्वीर के रूप में fiddle1 में हैं

my title टाइप करने के बाद:

यहां छवि विवरण दर्ज करें

नोटिस जहां नई data.title संपत्ति को दिखाया गया – पृथक गुंजाइश पर। हालांकि पारस्परिक दायरे का $parent संबंध के माध्यम से पृथक गुंजाइश की पहुंच है, यह title या data.title लिए नहीं दिखेगा – यह केवल नियंत्रक क्षेत्र में दिखाई देगा (यानी, यह प्रोटोटाइप विरासत का पालन करेगा), और नियंत्रक क्षेत्र में इन गुणों को परिभाषित नहीं किया गया है।

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

स्कोप विरासत

अच्छी तरह से पूछा, बीटीडब्ल्यू! आशा है कि मेरा जवाब सुवक्ता है ..

उत्तर के साथ क्या करना है कि कैसे अन्तराल तत्वों को उनके दायरे मिलते हैं।

संक्षेप में, आपको दो स्कोप मिलते हैं:

  1. नियंत्रक का दायरा, जिसमें $scope.data.title (स्पष्ट रूप से आपके input तत्व द्वारा जोड़ा गया है)
  2. निर्देशक का दायरा, जिसमें $scope.title

जब आप नियंत्रक का $scope.data.title , तो निर्देश का $scope.title भी बदलता है।

आपके पास एचटीएमएल, ट्रांससाइक्ड और टेम्प्लेट के दो खंड भी हैं। क्या हो रहा है यह है कि ट्रांस्क्डड एचटीएमएल नियंत्रक के दायरे में है, और टेम्पलेट एचटीएमएल निर्देशक के दायरे में है। तो ट्रांससाइंड एचटीएमएल को title बारे में कुछ नहीं पता है, और टेम्पलेट का क्षेत्र data.title बारे में कुछ भी नहीं जानता है

यह वास्तव में वास्तव में है कि क्या निष्कर्ष के लिए इरादा था – एक निर्देश के बाल तत्वों को अपने माता पिता के दायरे को रखने के लिए अनुमति देते हैं , इस मामले में नियंत्रक का दायरा। डिज़ाइन के अनुसार, अलग-अलग तत्वों को यह नहीं पता है कि उनके निर्देश में है, और इसलिए निर्देश के दायरे तक पहुंच नहीं है।

निर्देशित टेम्पलेट, दूसरी ओर, केवल निर्देश के दायरे में पहुंच प्राप्त कर सकते हैं।

मैंने अपना कोड थोडा बदल दिया है ताकि नामों को थोड़ा अधिक स्पष्ट किया जा सके (वही कार्यक्षमता, हालांकि)

http://jsfiddle.net/yWWVs/2/