कैसे एक निर्देश है कि एक अलग गुंजाइश

Question

मैं एक निर्देश है कि मैं इस तरह का उपयोग किया है है पर एनजी शो उपयोग करने के लिए।

scope :{ 
    model:'=' 
} 

अब मैं, कि निर्देश मेरे पृष्ठ का $ गुंजाइश की एक और विशेषता का उपयोग पर ng-show उपयोग करने के लिए कोशिश कर रहा हूँ इस तरह:

<dir ng-show="show" model="data"></dir> 

लेकिन यह काम कर रहा है क्योंकि यह निर्देश show खोजने की कोशिश कर रहा है नहीं कर रहा है अपने दायरे पर विशेषता।

मैं इस तथ्य के बारे में जानना नहीं चाहता कि इसका कंटेनर इसे छिपाने का विकल्प चुन सकता है।

वैकल्पिक हल मैंने पाया एक <div> में निर्देश लपेट और उस तत्व पर ng-show लागू करने के लिए है, लेकिन मैं अतिरिक्त तत्व इस बलों मुझे इस्तेमाल करना पसंद नहीं है:

<div ng-show="show" > 
    <dir model="data"></dir>  
</div> 

वहाँ एक बेहतर तरीका है ऐसा करने के लिए?

इस plunker देखें: http://plnkr.co/edit/Q3MkWfl5mHssUeh3zXiR?p=preview

Answer 1

आप कोणीय 1.2 या उच्चतर में माइग्रेट करने पर विचार कर सकते हैं। The isolate scope is now only exposed to directives with a scope property। इसका मतलब यह है एनजी शो अब अपने निर्देश से प्रभावित नहीं है और आप इसे वास्तव में लिख सकते हैं जैसे आप पहली जगह में यह करने की कोशिश की:

<dir ng-show="show" model="data"></dir> 

@ कोणीय-डेवलपर्स: महान काम, दोस्तों!

Answer 2

अद्यतन: इस उत्तर 1.2 से पहले कोणीय रिलीज करने के लिए लागू होता है। कोणीय 1.2 के लिए @ lex82 का उत्तर देखें।

क्योंकि आपके dir निर्देश एक अलग गुंजाइश बनाता है, सभी निर्देशों एक ही तत्व (dir इस मामले में) पर परिभाषित कि गुंजाइश को अलग प्रयोग करेंगे। यही कारण है कि ng-show माता-पिता के दायरे के बजाय अलग-अलग दायरे पर show संपत्ति की तलाश करता है।

अपने dir निर्देश वास्तव में एक standalone/self-contained/reusable component है, और इसलिए यह एक अलग दायरे का उपयोग करना चाहिए, तो अपने रैपिंग समाधान शायद सबसे अच्छा (बेहतर $parent का उपयोग कर, IMO से), क्योंकि इस तरह के निर्देशों सामान्य रूप से एक ही पर अन्य निर्देशों का नहीं किया जाना चाहिए तत्व (या आपको बिल्कुल इस प्रकार की समस्या मिलती है)।

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

Answer 3

लिंक फ़ंक्शन में निम्नलिखित जोड़ना समस्या हल करता है। यह घटक निर्माता के लिए एक अतिरिक्त कदम है, लेकिन घटक को अधिक सहज बनाता है।

function link($scope, $element, attr, ctrl) { 

    if (attr.hasOwnProperty("ngShow")) { 
     function ngShow() { 
      if ($scope.ngShow === true) { 
       $element.show(); 
      } 
      else if($scope.ngShow === false) { 
       $element.hide(); 
      } 
     } 
     $scope.$watch("ngShow", ngShow); 
     setTimeout(ngShow, 0); 
    } 
    //... more in the link function 
} 

तुम भी ngShow

scope: { 
    ngShow: "=" 
} 

Answer 4

के लिए सेटअप गुंजाइश बाइंडिंग करने की आवश्यकता होगी, बस इस तरह माता-पिता के लिए गुंजाइश $parent का उपयोग करें:

<dir ng-show="$parent.show" model="data"></dir> 

अस्वीकरण

मैं लगता है कि यह सटीक है आपके प्रश्न का उत्तर दें, लेकिन मैं मानता हूं कि यह एक सौंदर्यवादी दृष्टिकोण से परिपूर्ण नहीं है। हालांकि, <div> लपेटना बहुत अच्छा नहीं है।मुझे लगता है कि कोई इसे उचित ठहरा सकता है क्योंकि अन्य पैरामीटर से अलग गुंजाइश तक पारित किया गया है, यह देखा जा सकता है कि निर्देश वास्तव में एक अलग गुंजाइश है। दूसरी तरफ, मुझे यह स्वीकार करना होगा कि मैं नियमित रूप से पहले स्थान पर $ माता-पिता को भूल जाता हूं और फिर आश्चर्य करता हूं कि यह क्यों काम नहीं कर रहा है।

यह निश्चित रूप से is-visible="expression" अतिरिक्त विशेषता जोड़ने के लिए स्पष्ट होगा और आंतरिक रूप से ng-show डालें। लेकिन आपने अपने प्रश्न में कहा है कि आपने इस समाधान से बचने की कोशिश की है।

अद्यतन:कोणीय 1.2 या उच्चतर में काम नहीं करेगा।