angularjs निर्देश: सीएसएस कैसे encapsulate करने के लिए?

Question

वेब घटक के साथ एक परियोजना के बाद, मैं AngularJS पर वापस जा रहा हूं। मैं इस तथ्य से निराश हूं कि मुझे अपने सीएसएस को आंतरिक (या encapsulated) रखने के निर्देश के लिए एक उचित तरीका नहीं मिल रहा है।

वेब घटक के साथ मुझे यह समस्या नहीं थी क्योंकि पहले से ही स्टाइल टैग है जिसे टेम्पलेट में एम्बेड किया जा सकता है।

यह AngularJS निर्देशों के मामले में नहीं है।

यहाँ मैं क्या देखा तक है:

1) एक बाहरी फ़ाइल में एक सीएसएस नियम निर्धारित: मेरे-निर्देश {रंग: लाल;}, लेकिन इस कैप्सूलीकरण नहीं है।

2) element.css ({}) के साथ एक आंतरिक नियम परिभाषित करें; लिंक फ़ंक्शन के अंदर, लेकिन इस मामले में शैली को इनलाइन लागू किया जाता है और इस प्रकार बहुत भारी होता है और बाहरी सीएसएस द्वारा आसानी से ओवरराइड नहीं किया जा सकता है।

क्या अन्य तरीके हैं?

धन्यवाद

Answer 1

वहाँ एक एक कोणीय सेवा पहले से ही GitHub पर बनाया, तो आप अपने सीएसएस फ़ाइलों dinamically लोड कर सकते हैं, हो सकता है यह सहायक हो सकता है है

https://github.com/Yappli/angular-css-injector

या आप GruntJS करने का मौका दे सकते हैं और आपके पास एक बहुत अच्छी परियोजना संरचना हो सकती है, प्रत्येक मॉड्यूल/फ़ोल्डर में अपनी सीएसएस फ़ाइल हो सकती है, और ग्रंट उन सभी फ़ाइलों को एक में बंडल करेगा (या कई, यह निर्भर करता है कि आप कैसे कॉन्फ़िगर करते हैं)। इसे प्रबंधित करना और बदलना आसान है, लेकिन आपके पृष्ठ पर केवल एक फ़ाइल लोड की गई है। शायद ये लिंक ग्रंट मॉड्यूल खोजने में सहायक हो सकते हैं जो आपकी मदद कर सकता है।

https://www.npmjs.org/package/grunt-contrib-cssmin

https://www.npmjs.org/package/grunt-contrib-cssmin

https://www.npmjs.org/package/grunt-contrib-cssmin

Answer 2

आप उन ही निर्देश पर वर्ग और/या शैली तत्वों में पारित करने के लिए अनुमति दे सकते हैं और आप कैसे उस वर्ग/शैली से अधिक कुशल नियंत्रण हो सकता है आपके टेम्पलेट पर लागू है। पहला कदम replace : true के साथ अपना निर्देश घोषित करना है, जो तब आपके अंतर्निहित टेम्पलेट में किसी भी कक्षा/शैली की जानकारी ले जाएगा। उदाहरण के लिए:

app.directive("myDirective",function(){ 
    return { 
    restrict:'AE', 
    replace : true, 
    template: '<div>This is my directive</div>' 
    }; 
}); 

जब आप इस तरह HTML में इस का उपयोग करें:

<my-directive class="red"></my-directive> 

जिसके परिणामस्वरूप HTML होगा:

<div class="red">This is my directive</div> 

आप देख सकते हैं, के निर्देश की जगह के निर्देश को हटा टैग, लेकिन निर्देश के गुणों को संरक्षित करता है और उन्हें टेम्पलेट पर लागू करता है। इसलिए, आपके निर्देश में, आपको तकनीकी रूप से कुछ भी नहीं करना है और आपके उपयोगकर्ता शैली की जानकारी में स्वचालित रूप से आवश्यक होने के लिए आवेदन कर सकते हैं।

हालांकि, मान लेते हैं कि अपने निर्देश लेआउट अधिक जटिल है करते हैं:

app.directive("myDirective",function(){ 
    return { 
    restrict:'AE', 
    replace : true, 
    template: '<div><div>My Title</div>My content</div>' 
    }; 
}); 

तो आप स्पष्ट रूप से अतिरिक्त कक्षा/शैली संदर्भ है कि आपके निर्देश उपयोग वैकल्पिक रूप से कर सकते हैं और जहां वर्ग लागू किया जाएगा संकेत कर सकते हैं। उदाहरण के लिए:

<my-directive class="red" class-title="blue"></my-directive> 

और फिर, अपने निर्देश के संकलन या लिंक समारोह में, आप आंतरिक टेम्पलेट मदों के लिए वर्ग अगर इन इंगित किया गया है निर्धारित कर सकते हैं:

app.directive("myDirective",function(){ 
    return { 
    restrict:'AE', 
    replace : true, 
    template: '<div><div>Title</div>Content</div>', 
    compile : function(elem,attr){ 
     if (attr.classTitle){ 
      var titleElem = angular.element(elem.children()[0]); 
      titleElem.attr("class",attr.classTitle) 
     } 
    } 
    }; 
}); 

कौन सा निम्न परिणाम होगा:

<div class="red" class-header="blue"> 
    <div class="blue">My Title</div> 
    My Content 
</div> 

ट्रांसफर के साथ आप और भी अच्छी चीजें कर सकते हैं ताकि लोग तत्वों के लिए अपनी सामग्री और स्टाइल का उपयोग कर सकें।

Answer 3

एक विधि तुम कोशिश कर सकते घोषित करने और जावास्क्रिप्ट में शैलियों बताए है।

एक स्टाइल ऑब्जेक्ट घोषित करें।

styles = { 
     background: 'green', 
     color: 'black' 
     }; 

एनजी शैली

<div ng-style="$ctrl.styles"> 
    My Component with local CSS 
</div> 

---

का उपयोग कर एक टेम्पलेट के लिए वस्तु निरुपित यहाँ कुछ निम्नलिखित इस विधि

1. विषयों ड्राइव करने के लिए चर का उपयोग का उपयोग कर लाभ हैं।
2. दो शैली विलय के माध्यम से mixins एक साथ (lodashes _.defaults) शैली ओवरराइटिंग से अधिक
3. नियंत्रण ऑब्जेक्ट्स।
4. तार्किक स्थितियों के माध्यम से शैलियों को लागू करना।
5. स्थानीय शैलियों के साथ जो अन्य घटकों को प्रभावित नहीं कर सकता है।
6. आप कोणीय सेवाओं में शैलियों को रख सकते हैं और उन्हें केवल उस घटक में इंजेक्ट कर सकते हैं जिसकी आवश्यकता है।

---

पूर्ण उदाहरण

//Component 

class myComponent { 
    constructor(myCSSService) { 
     this.styles = { 
      background: 'black', 
      color: 'white' 
     }; 
     this.myCSSService = myCSSService; 
    } 
} 

myComponent.$inject = [ 'myCSSService' ]; 

angular.module('myModule', []) 
    .component('myComponent', { 
     controller: myComponent, 
     bindings: {}, 
     template: ` 
      <div ng-style="$ctrl.styles"> 
      My Component with local CSS 
      </div> 
      <div ng-style="$ctrl.myCSSService.styles"> 
      My Component with Injected CSS 
      </div> 
     `, 
    }); 

//Style Service 

class myCSSService{ 
    constructor() { 
     this.styles = { 
     background: 'green', 
     color: 'black' 
     }; 
    } 
} 

angular.module('myCSSModule', []) 
    .service('myCSSService', myCSSService);