Dyrektywa angularjs: jak obudować css?

Question

Po projekcie z komponentami sieci Web wracam do AngularJS. Jestem sfrustrowany faktem, że nie mogę znaleźć odpowiedniego sposobu na to, by dyrektywa utrzymywała swój CSS wewnątrz (lub hermetyzowany).

Z komponentem WWW nie miałem tego problemu, ponieważ istnieje już tag stylu, który można osadzić w szablonie

Tak nie jest w przypadku dyrektyw AngularJS.

Aż tu co widziałem to:

1) określa regułę CSS w zewnętrznym pliku: my-dyrektywa {color: red;}, ale to nie jest hermetyzacja.

2) zdefiniuj regułę wewnętrzną za pomocą elementu element.css ({}); wewnątrz funkcji link, ale w tym przypadku styl jest stosowany inline i dlatego jest zbyt ciężki i nie może być łatwo zastąpiony przez zewnętrzne css.

Czy są inne sposoby?

Dzięki

Answer 1

Jest jeden kątowy usługa już utworzony na GitHub, można załadować pliki css dinamically, może to być pomocne

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

Albo można dać szansę GruntJS i możesz mieć bardzo ładną strukturę projektu, każdy moduł/folder może mieć własny plik css, a Grunt będzie łączyć wszystkie te pliki w jeden (lub wiele, w zależności od konfiguracji). Łatwo to zarządzać i zmieniać, ale także masz tylko jeden plik załadowany na twoją stronę. Może te linki mogą być pomocne w znalezieniu modułu Grunt, który może ci pomóc.

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

Można zezwolić użytkownikom przechodzić w klasie i/lub elementów stylu nad dyrektywą się i można mieć precyzyjną kontrolę nad tym, w jaki sposób klasa/stylu zostanie zastosowany do twojego szablonu. Pierwszym krokiem jest zadeklarowanie swojej dyrektywy z replace : true, która następnie przeniesie wszelkie informacje o klasie/stylu do bazowego szablonu. Na przykład:

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

Podczas korzystania z tego w HTML tak:

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

Powstały HTML będą:

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

Jak widać, zastąpi dyrektywę usuwa dyrektywę tag, ale zachowuje atrybuty dyrektywy i stosuje je do szablonu. Dlatego w twojej dyrektywie technicznie nie musisz nic robić, a twoi użytkownicy mogą przekazywać informacje o stylu, które będą automatycznie stosowane w razie potrzeby.

Jednak załóżmy, że układ dyrektywa jest bardziej skomplikowana:

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

Następnie można jednoznacznie wskazać dodatkowe referencje klasa/stylu, że dyrektywa może opcjonalnie używać i gdzie będzie stosowana klasa. Na przykład:

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

a następnie w kompilacji lub łącza funkcji Twojego dyrektywy, można ustawić klasę dla wewnętrznych elementów szablonu, jeśli zostały one podane:

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) 
     } 
    } 
    }; 
}); 

Które spowodowałoby następujące:

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

Jest jeszcze więcej dobrych rzeczy, które można zrobić z transclusion, aby ludzie mogli używać własnych treści i stylizacji dla elementów.

Answer 3

Jedną z metod, którą można wypróbować, jest deklarowanie i przypisywanie stylów w JavaScript.

Zadeklaruj obiekt stylu.

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

przypisać obiekt do szablonu za pomocą NG-styl

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

---

Oto kilka następujące korzyści przy użyciu tej metody

1. pomocą zmiennych jechać tematów.
2. Mieszanie poprzez łączenie dwóch obiektów stylów razem (dyski _.defaults)
3. Kontrola nadpisywania stylu.
4. Stosowanie stylów w warunkach logicznych.
5. Posiadanie lokalnych stylów, które nie mogą wpływać na inne komponenty.
6. Możesz wstawiać style w usługach kątowych i wprowadzać je tylko w komponent, który ich potrzebuje.

---

Pełna Przykład

//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);