Tại sao kiểu ng không hoạt động trên cùng một phần tử như một chỉ thị tùy chỉnh?

Question

Tôi đang cố gắng áp dụng các thuộc tính ng-style trên một thẻ chỉ tùy chỉnh, loại giống như vậy:

<my-directive ng-style="myStyle"></my-directive> 

Bên trong bộ điều khiển tôi có:

$scope.myStyle = { 
    "background": "red" 
} 

này dường như không làm việc mặc dù. Khi tôi kiểm tra HTML 'MyStyle' không được hiển thị. Khi tôi áp dụng cùng một thẻ kiểu ng trên một div thông thường, nó sẽ hiển thị đúng.

Tại sao kiểu ng không hoạt động trên thẻ chỉ thị tùy chỉnh?

Answer 1

Chỉ thị của bạn có khả năng xác định phạm vi cách ly: scope: { ... }. Trong trường hợp đó, tất cả các chỉ thị được xác định trên phần tử đó sẽ sử dụng phạm vi cô lập. Do đó, kiểu ng sẽ tìm kiếm thuộc tính myStyle trên phạm vi cô lập, không tồn tại.

Ở trên, dòng màu xám hiển thị $ cha mẹ, đứt nét hiển thị thừa kế nguyên chủng. Phạm vi 004 là phạm vi cô lập của bạn. Phạm vi 003 là phạm vi điều khiển của bạn. ng-phong cách sẽ tìm kiếm myStyle trong phạm vi 004, không tìm thấy nó, sau đó nó sẽ thực hiện theo các đường đứt nét và tìm nó trong Phạm vi, và không tìm thấy nó ở đó.

Thông thường bạn không muốn sử dụng các chỉ thị tạo ra một phạm vi cô lập cùng với các chỉ thị khác trên cùng một phần tử. Bạn có một vài tùy chọn:

1. sử dụng scope: true thay vì phạm vi cô lập trong chỉ thị của bạn. Sau đó, khi ng-style tìm kiếm myStyle trong phạm vi 004 và không tìm thấy, nó sẽ theo sau đường đứt nét (trong hình bên dưới) và tìm nó trong phạm vi gốc:
   
2. sử dụng ng-style="$parent.myStyle" trong HTML của bạn truy cập thuộc tính myStyle trong phạm vi gốc (ví dụ: theo dòng màu xám trong hình ảnh đầu tiên).