AngularJS: निर्देशक पृथक गुंजाइश-गुंजाइश चर अपरिभाषित




angularjs-directive angularjs-scope (3)

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

स्कोप को विज़ुअलाइज़ करने का सबसे अच्छा तरीका कंसोल.लॉग स्टेटमेंट्स का उपयोग करके आपके लिंक फ़ंक्शन जैसे,

link: function(scope) {          
      scope.hello = 'attrDir';
      console.log('scope in attrDir: ', scope);
    }

    link: function(scope) {          
          scope.hello = 'oneWay';
          console.log('scope in oneWay: ', scope);
        }

यदि आप डेवलपर टूल्स को खोलते हैं, तो आप देखेंगे कि पहला निर्देश उसके प्रोटोटाइप में अपने मूल गुण को विरासत में लेता है

__proto__:Scope 

जबकि दूसरा एक अपने ऑब्जेक्ट के साथ एक ऑब्जेक्ट है (कर्ली ब्रेसिज़ का उपयोग करके आप इसे एक पृथक गुंजाइश दे सकते हैं)

__proto__:Object

कृपया, कोई मुझे बता सकता है, क्यों attrDir का दायरा चर दिखाई देता है, और oneWay नहीं है? मैंने सोचा कि scope: {} अलग-थलग है

angular.module('test', []);

angular.module('test').directive('attrDir', attrDir);

function attrDir(){
    return {

        scope: true,

        link: function(scope){
          scope.hello = 'attrDir';
        }

    };
}

angular.module('test').directive('oneWay', oneWay);

function oneWay(){
    return {

        scope: {
          data: '<?'
        },

        link: function(scope){
          scope.hello = 'oneWay';  
        }

    };
}

hello केवल attr-dir में प्रदान किया जाएगा

<attr-dir>
  <span>{{hello}}</span>
</attr-dir>
<one-way>
  <span>{{hello}}</span>
</one-way>

यहां एक प्लंकर है: https://plnkr.co/edit/2CM4vVRshWuJvaBj2q8T?p=preview

धन्यवाद।


क्योंकि आप निर्देश में घटक बाइंडिंग लागू कर रहे हैं।

<प्रतीक एक तरफ़ा बाइंडिंग को दर्शाता है जो 1.5 से उपलब्ध हैं।

यदि आप one-way घटक में hello दिखाना चाहते हैं तो आपको नीचे दिए गए कार्यान्वयन को बदलना चाहिए:

एचटीएमएल

 <one-way hello="$ctrl.hello">
      <span>{{$ctrl.hello}}</span>
    </one-way>

जे एस

angular.module('test').component('oneWay', {
  bindings:{
    hello:'='
  },
  controller: function() {
    this.hello = 'oneWay';
  }
});

डेमो

plnkr


सबसे पहले, आप जो देख रहे हैं उसका कोई संबंध नहीं है < बाध्यकारी

समस्या ये है कि दोनों निर्देशों के अंदर अभिव्यक्ति {{hello}} इन निर्देशों के टेम्पलेट का हिस्सा नहीं हैं । और ऐसे तत्वों के लिए बाइंडिंग के नियम अलग-अलग होते हैं।

अंगुलियों स्वचालित रूप से {{hello}} अभिव्यक्ति के लिए लिंक फ़ंक्शन बनाता है। लेकिन वे स्कॉप्स जिनके विरुद्ध इन लिंक फ़ंक्शन का मूल्यांकन किया गया है आपके मामलों में अलग है।

आप शायद क्या उम्मीद है:

            rootScope
         /             \
        /               \
attr-dir-new-scope  one-way-isoloate-scope
      /                   \
     /                     \
{{hello}}               {{hello}}

हालांकि, स्रोत में इस टिप्पणी के अनुसार:

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

असली तस्वीर यह है:

             root scope
         /             \    \
        /               \    \
attr-dir-new-scope       \    one-way-isoloate-scope
      /                   \
     /                     \
{{hello}}               {{hello}}

तो आपके उदाहरण में, पहला निदेशालय <attr-dir> पृथक गुंजाइश नहीं बना है, बल्कि नए अवसर पैदा करता है, इसलिए जब कोणीय जोड़ता है, तो आपके निर्देश के लिंक फंक्शन में यह नया अवसर गुजरता है:

link: function(scope){
     scope.hello = 'attrDir';
}

और {{hello}} अभिव्यक्ति के लिए बनाई गई लिंक फ़ंक्शन के लिए यही कारण है कि जब आप अपने लिंकिंग फ़ंक्शन में कोई मान जोड़ते हैं तो यह फ़ंक्शन को जोड़ने के लिए अभिव्यक्ति में उपलब्ध है।

लेकिन आपका दूसरा निदेशालय <one-way> अलग <one-way> अलग अवसर बनाता है और मैंने ऊपर उल्लिखित टिप्पणी के अनुसार, निर्देश के लिंक करने का कार्य पृथक गुंजाइश के रूप में अलग-अलग हो जाता है, लेकिन अभिव्यक्ति के लिंकिंग कार्य को अलग-अलग गुंजाइश प्राप्त होती है (आपके उदाहरण में रूट गुंजाइश )। तो आप विभिन्न स्कोप पर hello मान जोड़ रहे हैं यही कारण है कि मूल्य अनिर्धारित है।





angularjs-scope