कोणीय निर्देश

Question

टास्क:

• संपर्क दिखाने के लिए।
• संपर्क जेएसओएन डेटा है, मान लें {नाम: "मार्क", स्थान: "इंग्लैंड", फोन: [...]}।
• संपर्क कई मायनों में दिखाया जा सकता है: कॉम्पैक्ट/विस्तृत/अतिरिक्त जानकारी (साझा किए गए संपर्क - अतिरिक्त निर्देश) के साथ बढ़ाया

क्योंकि संपर्क विभिन्न स्थानों में विभिन्न पृष्ठों पर दिखाया जा सकता है यह निर्देश बनाने के लिए स्वाभाविक रूप से है (विजेट) संपर्क के लिए, लेकिन यहां सवाल है: "एकाधिक टेम्पलेट्स के साथ एक ही विजेट को व्यवस्थित कैसे करें?"

विकल्प: - संभवतः एनजी स्विच का एक बहुत और एनजी-अगर के साथ बड़ी टेम्पलेट

1. एक टेम्पलेट के साथ एक निर्देश बनाएं, कि वर्गों "प्रकार" संपर्क के अनुसार छुपाता
2. प्रत्येक टेम्पलेट के लिए निर्देश बनाएं - लगभग केवल अलग टेम्पलेट (या templateURL) के साथ एक ही निर्देशों
3. करने के लिए load templates dynamically while linking - और जगह (विलय विशेषताएँ) ट्रांसक्लुजन साथ समस्या है

क्या इन समस्या को हल करने के साथ अपने expirience?

Answer 1

व्यक्तिगत रूप से मुझे लगता है कि विकल्प 2 प्रदर्शन मोड के बीच एक साफ अलगाव प्रदान करता है। मैंने प्रत्येक टेम्पलेट के लिए अलग-अलग निर्देशों का उपयोग करके यह सुनिश्चित करने के लिए working CodePen example बनाया है।

मेरे कोडपेन उदाहरण में उपयोग की जाने वाली विधि एक टेम्पलेट फैक्ट्री का उपयोग करती है जिसे कोणीय डी के माध्यम से प्रत्येक निर्देश में इंजेक्शन दिया जाता है। टेम्पलेट फैक्ट्री कार्यान्वयन बहुत साफ है क्योंकि यह केवल अलग-अलग समर्थित प्रदर्शन मोड (कॉम्पैक्ट & विस्तृत) के लिए ng-include टेम्पलेट स्ट्रिंग का उपयोग करता है। वास्तविक HTML टेम्पलेट्स (आंशिक) को बाहरी दृश्य फ़ाइलों या आंतरिक स्क्रिप्ट ब्लॉक में रखा जा सकता है।

संपर्क निर्देशों का उपयोग करना आसान है:

<contact compact ng-repeat="contact in contacts" ng-model="contact"></contact> 

इस संपर्क सूची का एक कॉम्पैक्ट संस्करण पैदा करता है।

<contact detailed ng-repeat="contact in contacts" ng-model="contact"></contact> 

यह एक विस्तृत संपर्क सूची बनाता है।

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

Answer 2

मैं एक नया एडम उदाहरण पर काम कर रहा है और यह भी कोणीय डॉक्स जिसमें वे templateUrl संपत्ति https://docs.angularjs.org/guide/directive में कार्यों के बारे में बात से नमूना का उपयोग कर दृष्टिकोण का निर्माण किया है, इस कोणीय डॉक्स से plunker है: http://plnkr.co/edit/h2CSf2WqCLYfPvzL9WQn?p=preview

.directive('myCustomer', function() { 
    return { 
     templateUrl: function(elem, attr){ 
     return 'customer-'+attr.type+'.html'; 
     } 
    }; 
    }); 

और

http://codepen.io/anon/pen/wawOyz?editors=101

app.factory('templates', function() { 
    return { 
    compact: 'compact', 
    detailed: 'detailed' 
    }; 
}); 

app.directive('contact', function(templates) { 
    return { 
    restrict: 'E', 
    templateUrl: function($elem, $attr){ 
     return templates[$attr.mode];  
    }, 
    scope: { 
     contact: '=ngModel' 
    } 
    }; 
}); 

मैं टी इसे पसंद किया: यह मेरा रीमिक्स समाधान है वह एक कारखाने में सभी टेम्पलेट पते रखने का विचार करता है लेकिन मुझे निर्देश-प्रति-मोड काफी दोहराया जाता है और यदि आपके पास इस दृष्टिकोण का उपयोग करके कई तत्व हैं तो आपको उन्हें नाम (संपर्क-पाठ, ईमेल-टेक्स्ट, कंपनी-टेक्स्ट) नाम देने की आवश्यकता होगी वे दुर्घटनाग्रस्त नहीं होते हैं।

मुझे यकीन नहीं है कि यह जाने का एक बेहतर तरीका है, कम और अधिक DRY है, लेकिन परीक्षण या कम अनुकूलन के लिए शायद अधिक कठिन है। अगर मैं किसी की मदद कर सकता हूं तो मैं सिर्फ दृष्टिकोण साझा करना चाहता था।