AngularJS में पैरेंट स्कोप वेरिएबल को अपडेट करें


113

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

मेरी स्थिति में मेरे पास एक फॉर्म के भीतर एक कैलेंडर नियंत्रक है। मैं पेरेंट स्कोप (जो कि फॉर्म है) से स्टार्ट और एंड डेट को अपडेट करना चाहूंगा ताकि फॉर्म सबमिट होने के बाद स्टार्ट और एंड डेट हो।


आपके कैलेंडर नियंत्रक की तरह लगता है एक निर्देश होना चाहिए।
योना

जवाबों:


193

आपको पैरेंट स्कोप में ऑब्जेक्ट (प्राइमर नहीं) का उपयोग करने की आवश्यकता है और फिर आप इसे चाइल्ड स्कोप से सीधे अपडेट कर पाएंगे

जनक:

app.controller('ctrlParent',function($scope){
    $scope.parentprimitive = "someprimitive";
    $scope.parentobj = {};
    $scope.parentobj.parentproperty = "someproperty";
});

बाल:

app.controller('ctrlChild',function($scope){
    $scope.parentprimitive = "this will NOT modify the parent"; //new child scope variable
    $scope.parentobj.parentproperty = "this WILL modify the parent";
});

वर्किंग डेमो : http://jsfiddle.net/sh0ber/xxNxj/

देखें कि AngularJS में स्कोप प्रोटोटाइप / प्रोटोटाइप इनहेरिटेंस की बारीकियां क्या हैं?


1
मुझे यह त्रुटि तब मिलती है जब मैं इसे लागू करने का प्रयास करता हूं: 'अपरिभाषित की संपत्ति' 'पेरेंटप्रॉपर्टी' निर्धारित नहीं कर सकता।
मालक्राइ

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

क्षमा करें, मैं इस प्रश्न के बारे में भूल गया। मैंने इसे स्वीकार कर लिया है क्योंकि अंततः मैंने इस उत्तर की मदद से इसे प्राप्त करने का प्रबंधन किया।
मलक्रि ०

मैं ctrlParent div एलिमेंट में {{parentobj.parentproperty}} को लगाना समझता हूं, जो पैरेंटोबज ऑब्जेक्ट घोषित करता है और इस ऑब्जेक्ट को ctrlParent दायरे में होने के रूप में सेट करता है। क्या यह एक सही धारणा है ?
स्टीफन

1
धन्यवाद, यह काम करता है! मुझे इस पर निश्चित रूप से (प्रोटोपेरिकल एनहिरिटेंस एंड प्राइमेटीज़) पढ़ना चाहिए। क्या आप एक अच्छा पढ़ने की सलाह दे सकते हैं जो आपके एसओ लिंक की तुलना में थोड़ा अधिक है?
jvannistelrooy

116

इस कार्य को करने और $scope.$parentचर का उपयोग नहीं करने का एक और तरीका है ।

बस माता-पिता के दायरे में मूल्य को बदलने के लिए एक विधि तैयार करें और इसे बच्चे में उपयोग करें। ऐशे ही:

app.controller('ctrlParent',function($scope) {
  $scope.simpleValue = 'x';
  $scope.changeSimpleValue = function(newVal) {
    $scope.simpleValue = newVal;
  };
});

app.controller('ctrlChild',function($scope){
    $scope.changeSimpleValue('y');
});

यह काम भी करता है और आपको मूल्य परिवर्तनों पर अधिक नियंत्रण देता है।

इसके बाद आप भी तरह HTML में भी विधि कॉल कर सकते हैं: <a ng-click="changeSimpleValue('y')" href="#">click me!</a>


1
अच्छा समाधान! यह काम करता है क्योंकि जब कुछ मौजूदा $ स्कोप में नहीं मिलता है, तो कोणीय $ पेरेंट में दिखता है। docs.angularjs.org/guide/scope ('स्कोप पदानुक्रम' देखें)।
एलो

मुझे यह उत्तर पसंद है, कोई अनावश्यक वस्तु बनाने की आवश्यकता नहीं है।
ग्रिमडुड

3
भविष्य के पाठक: ये सभी उच्च-पाँच टिप्पणियाँ थोड़ी गुमराह करने वाली हैं। प्रत्येक चर के लिए दो सेटर फ़ंक्शंस (जो "अनावश्यक वस्तुएं" हैं) बनाना एक वंशानुक्रम और वंशानुक्रम का अनावश्यक कीचड़ है और यह कोणीय तरीका नहीं है। एंगुलर के निर्माता मिस्को हेवरी एक बात करते हैं जिसमें वह सिखाता है "जब भी आपके पास एनजी-मॉडल होता है तो कहीं न कहीं एक डॉट होता है। यदि आपके पास डॉट नहीं है, तो आप इसे गलत कर रहे हैं।" Misko वीडियो @ 29:19
Dan

मैं कंट्रोलर सिंटैक्स का उपयोग करके इस समाधान को कैसे लागू कर सकता हूं?
निरान

6

यह भी काम करता है (लेकिन यह सुनिश्चित नहीं है कि यह सर्वोत्तम अभ्यास है या नहीं)

app.controller('ctrlParent',function($scope) {
    $scope.simpleValue = 'x';
});

app.controller('ctrlChild',function($scope){
    $scope.$parent.simpleValue = 'y';
});

1
आप सही हैं, $ गुंजाइश का उपयोग कर रहे हैं। $ parent.value ज्यादातर मामलों में काम करेगा, हालांकि यह आमतौर पर बड़े पैमाने पर उपयोग करने के लिए सबसे अच्छा विचार नहीं है क्योंकि इससे बड़ी, अधिक जटिल परियोजनाओं में प्रबंधन करना मुश्किल हो सकता है।
एलेक्स जॉनसन

4

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

यदि आपको मूल दायरे में कुछ आदिम (ints, बूलियन्स, तार) बदलने की आवश्यकता है, तो आपको उस दायरे में किसी अन्य ऑब्जेक्ट की विशेषता होना चाहिए, इसलिए असाइनमेंट पढ़ा जा सकता है:

<a ng-click="viewData.myAttr = 4">Click me!</a>

और यह बदले में होगा:

  1. जिस viewDataभी क्षेत्र में इसे परिभाषित किया गया है उससे वस्तु प्राप्त करें
  2. इसकी myAttrविशेषता 4 असाइन करें ।

4

अभिभावक में घोषित चर तक पहुँचने के लिए, हमें बाल नियंत्रक या टेम्पलेट फ़ाइल में $ माता-पिता का उपयोग करना चाहिए

नियंत्रक में

$scope.$parent.varaiable_name

Html टेम्पलेट में

ng-model="$parent.varaiable_name"
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.