angularjs chỉ thị: làm thế nào để đóng gói css?

Question

Sau một dự án với Cấu phần Web, tôi sẽ quay lại AngularJS. Tôi thất vọng bởi thực tế tôi không thể tìm thấy một cách thích hợp cho một chỉ thị để giữ cho nội bộ CSS của nó (hoặc được đóng gói).

Với thành phần web, tôi không gặp sự cố này vì đã có thẻ kiểu có thể được nhúng trong mẫu.

Đó không phải là trường hợp với chỉ thị AngularJS.

Cho đến đây những gì tôi thấy là:

1) xác định một quy tắc CSS trong một tập tin bên ngoài: my-chỉ thị {color: red;}, nhưng đây không phải là đóng gói.

2) xác định quy tắc nội bộ với element.css ({}); bên trong hàm liên kết, nhưng trong trường hợp này, kiểu được áp dụng nội tuyến và do đó quá nặng và không thể dễ dàng ghi đè bằng css bên ngoài.

Có cách nào khác không?

Cảm ơn

Answer 1

Có một dịch vụ góc đã tạo trên GitHub, bạn có thể tải các file css của bạn dinamically, có lẽ nó có thể hữu ích

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

Hoặc bạn có thể cung cấp cho một cơ hội để GruntJS và bạn có thể có cấu trúc dự án rất đẹp, mỗi mô-đun/thư mục có thể có tệp css riêng và Grunt sẽ gộp tất cả các tệp đó thành một (hoặc nhiều, tùy thuộc vào cách bạn định cấu hình). Dễ quản lý và thay đổi, nhưng bạn cũng chỉ có một tệp được tải trên trang của mình. Có lẽ các liên kết này có thể hữu ích để tìm mô-đun Grunt có thể giúp bạn.

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

Bạn có thể cho phép người dùng vượt qua trong lớp và/hoặc các yếu tố phong cách trên chỉ thị riêng của mình và bạn có thể có quyền kiểm soát hạt mịn hơn như thế nào mà lớp/phong cách được áp dụng cho mẫu của bạn. Bước đầu tiên là khai báo chỉ thị của bạn với replace : true, sau đó sẽ mang bất kỳ thông tin lớp/kiểu nào vào mẫu cơ bản của bạn. Ví dụ:

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

Khi bạn sử dụng này trong HTML như thế này:

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

HTML kết quả sẽ là:

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

Như bạn có thể thấy, thay thế chỉ loại bỏ các chỉ thị , nhưng giữ nguyên các thuộc tính của chỉ thị và áp dụng chúng cho mẫu. Vì vậy, trong chỉ thị của bạn, bạn về mặt kỹ thuật không phải làm bất cứ điều gì và người dùng của bạn có thể chuyển thông tin phong cách để được tự động áp dụng khi cần thiết.

Tuy nhiên, chúng ta hãy giả sử rằng bố trí chỉ thị của bạn là phức tạp hơn:

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

Sau đó, bạn có thể chỉ ra một cách rõ ràng tài liệu tham khảo lớp/phong cách bổ sung mà chỉ bạn có thể tùy chọn sử dụng và nơi lớp sẽ được áp dụng. Ví dụ:

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

Và sau đó, trong biên dịch hoặc liên kết chức năng của chỉ thị, bạn có thể thiết lập các lớp cho các hạng mục mẫu nội bộ nếu chúng được chỉ ra:

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

nào sẽ cho kết quả như sau:

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

Thậm chí còn có nhiều điều tốt hơn bạn có thể làm với việc chuyển đổi để mọi người có thể sử dụng nội dung và kiểu dáng của riêng họ cho các yếu tố.

Answer 3

Một phương pháp bạn có thể thử là khai báo và gán kiểu trong JavaScript.

Khai báo đối tượng Kiểu.

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

Gán đối tượng cho một mẫu sử dụng ng kiểu

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

---

Dưới đây là một số những ưu điểm sau sử dụng phương pháp này

1. Sử dụng biến để lái các chủ đề.
2. Kết hợp thông qua hợp nhất hai đối tượng kiểu với nhau (lodashes _.defaults)
3. Kiểm soát ghi đè kiểu.
4. Áp dụng kiểu thông qua các điều kiện hợp lý.
5. Có Kiểu địa phương không thể ảnh hưởng đến các thành phần khác.
6. Bạn có thể đặt kiểu trong các dịch vụ góc cạnh và chỉ đưa chúng vào thành phần cần chúng.

---

Full Ví dụ

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