2013-01-13 16 views
46

कृपया उदाहरण hereAngularJS निर्देश: पृथक गुंजाइश और attrs

foodMeApp.directive('fmRating', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     symbol: '@', 
     max: '@', 
     readonly: '@' 
    }, 
    require: 'ngModel', 
    link: function(scope, element, attrs, ngModel) { 

     attrs.max = scope.max = parseInt(scope.max || 5, 10); 
... 

कोणीय जरूरतों symbol, max, readonly माता पिता दायरे से उस तक पहुंच पृथक गुंजाइश वस्तु में परिभाषित किया जा करने के लिए देखते हैं।

यह here

<fm-rating ng-model="$parent.restaurant.price" symbol="$" readonly="true"></fm-rating>

प्रयोग किया जाता है तो, attrs के उद्देश्य क्या है? attrs के माध्यम से पारित सभी विशेषताओं तक पहुंच नहीं सकता है। scope.max

के बजाय अधिकतम attrs.max के मूल्य का अधिकतम उपयोग क्यों नहीं कर सकता है attrs.max = scope.max की तरह वापस क्यों असाइन करें?

चूंकि यह ऐप कोणीय लेखकों द्वारा लिखा गया है, इसलिए मुझे एक कारण की उम्मीद है।

धन्यवाद।

+1

यहां एक नज़र डालें http://stackoverflow.com/questions/14050195/what-is-the-difference-between-and-in-directive-scope/14063373#14063373 –

उत्तर

94

अटर्स का उद्देश्य क्या है?

  1. वे एक निर्देश है कि एक अलग दायरे का उपयोग करता है में जानकारी पारित करने के लिए एक ही रास्ता है:

गुण अपने निर्देश के रूप में एक ही तत्व पर परिभाषित कुछ उद्देश्य होते हैं। चूंकि निर्देश अलग-अलग दायरे को पारदर्शी रूप से मूल दायरे से प्राप्त नहीं होता है, इसलिए हमें यह निर्दिष्ट करने का एक तरीका चाहिए कि हम अलग-अलग दायरे में क्या पारित करना चाहते हैं। "ऑब्जेक्ट हैश" में '@', '=', और '&' इसलिए प्रत्येक को यह निर्दिष्ट करने के लिए एक विशेषता की आवश्यकता होती है कि कौन सा डेटा/जानकारी पास की जा रही है।

  • वे एक अंतर-निर्देश संचार तंत्र के रूप में कार्य करते हैं। (उदा।, Managing communication between independent AngularJS directives independently)
  • वे normalize विशेषता नाम।
  • कोई व्यक्ति attrs के माध्यम से पारित सभी विशेषताओं तक पहुंच नहीं सकता है?

    हाँ आप कर सकते हैं, लेकिन

    1. आप किसी भी डेटा बाइंडिंग नहीं होगा।
      '@' एक तरफा "स्ट्रिंग" डाटाबेसिंग (पैरेंट स्कोप → निर्देश अलग-अलग दायरे को सेट करता है) के साथ @ आप जिस मान को देखते/प्राप्त करते हैं वह हमेशा एक स्ट्रिंग होता है, इसलिए यदि आप कोशिश कर रहे हैं तो इसका उपयोग न करें अपने निर्देश पर एक ऑब्जेक्ट पास करें।
      '=' दो-तरफा डाटाबेसिंग सेट करता है (अभिभावक स्कोप ↔ निर्देश अलग-अलग दायरे)।
      डाटाबेसिंग के बिना, आपका निर्देश $ घड़ी या $ मॉडल स्वचालित रूप से डेटा/डेटा परिवर्तनों का निरीक्षण नहीं कर सकता है।
    2. {{}} के साथ विशेषता मान आपको समस्याएं पैदा करेंगे, क्योंकि उन्हें इंटरपोलेट नहीं किया जाएगा।
      मान लें कि हमारे पास <my-directive name="My name is {{name}}"> है और मूल दायरे में $scope.name='Mark' है। फिर, लिंकिंग फ़ंक्शन के अंदर, console.log(attrs.name) परिणाम undefined में परिणाम।
      यदि नाम '@' के साथ परिभाषित एक अलग स्कोप संपत्ति है, तो attrs.$observe('name', function(val) { console.log(val) }) परिणाम My name is Mark में परिणाम। (ध्यान दें कि जोड़ने समारोह के अंदर, $ (निरीक्षण) अंतर्वेशित मूल्य प्राप्त करने इस्तेमाल किया जाना चाहिए।)

    क्यों scope.max

    के बजाय attrs.max के रूप में अधिकतम की एक नहीं पहुँच मूल्य

    ऊपर दिए क्यों attrs.max = scope.max तरह वापस आवंटित?

    ऐसा करने का एकमात्र कारण मैं ऐसा करने के बारे में सोच सकता हूं यदि किसी अन्य निर्देश को इस विशेषता/मूल्य (यानी, अंतर-निर्देश संचार) को देखने की आवश्यकता है। हालांकि, इस निर्देश के बाद इस निर्देश के बाद अन्य निर्देशों को चलाने की आवश्यकता होगी (जिसे priority निर्देश सेटिंग के साथ कुछ हद तक नियंत्रित किया जा सकता है)।

    सारांश: एक अलग दायरे के साथ निर्देश में, आमतौर पर आप attrs का उपयोग नहीं करना चाहते हैं। (मुझे लगता है कि यह निर्देश में प्रारंभिक डेटा/मान भेजने का एक तरीका हो सकता है - यानी, यदि आपको इन मानों के लिए डेटाबेस की आवश्यकता नहीं है और आपको इंटरपोलेशन की आवश्यकता नहीं है।)

    +3

    विस्तृत उत्तर के लिए धन्यवाद। मैं आपके प्रयास की सराहना करता हूं, और विशेष रूप से आपके लेख का आनंद लिया https://github.com/angular/angular.js/wiki/The-Nuances-of-स्कोप- प्रोटोटाइप- विरासत। अच्छा कार्य। – bsr

    3

    attrs का उपयोग करके आप तो इस मामले में आप प्रतीक और केवल पढ़ने के लिए विशेषताओं के लिए उपयोग होगा की तरह

    <fm-rating ng-model="$parent.restaurant.price" symbol="$" readonly="true"> 
    

    गुण आपके html टैग में परिभाषित उपयोग करने में सक्षम हैं। आपके कस्टम निर्देश में परिभाषित प्रत्येक विशेषता attrs चर के लिए उपलब्ध होगी।

    ब्लॉक:

    attrs.max = scope.max = parseInt(scope.max || 5, 10); 
    

    विल पार्स और आवंटित वर्तमान scope.max मूल्य या , अगर गैर विद्यमान, scope.max और attrs.max करने के लिए। इस तरह, असाइनमेंट के बाद आप attrs.max से पढ़ सकते हैं। इससे पहले attrs.max संपत्ति अपरिभाषित में।

    fmRating.js स्रोत का निरीक्षण करना मुझे नहीं पता कि क्यों/कहाँ/जब कोड का यह टुकड़ा उपयोग किया जा रहा है।

    संबंधित मुद्दे