Stuck tạo chỉ thị phong cách css tùy chỉnh

Question

Đối với một trình chỉnh sửa trực quan, tôi đang cố tạo một chỉ thị mới viết kiểu CSS. Tôi đang cố gắng để có được chỉ thị để cập nhật khi một hộp kiểm được nhấp để làm cho thuộc tính màu nền trong suốt.

Dưới đây là của tôi (không làm việc) chỉ thị:

myApp.directive('customstyle', function() { 
return { 
    restrict: 'E', 
    link: function (scope, element, attrs) { 
     var bgColor; 
     scope.$watch(attrs.myTransparent, function (value) { 
     if (value) { 
      bgColor = 'transparent'; 
     } else { 
      bgColor = attrs.myBgcolor; 
     } 
     updateStyle(); 
     }, true); 

     function updateStyle() { 
     var htmlText = '<style>.' + attrs.myClass + '{'; 
     htmlText += 'background-color: ' + bgColor + ';'; 
     htmlText += "}</style>"; 
     element.replaceWith(htmlText); 
     } 
     updateStyle(); 
    } 
} 
}); 

và html yếu tố:

<customstyle my-class="examplediv" my-transparent="settings.Window.Transparent" my-bgcolor="settings.Window.BackgroundColor"></customstyle> 

Dưới đây là một jsfiddle của tình hình: http://jsfiddle.net/psinke/jYQc6/

Bất kỳ trợ giúp sẽ được đánh giá rất nhiều.

Answer 1

Hãy thử sử dụng chỉ thị trực tiếp trên phần tử bạn muốn thay đổi, dễ dàng hơn để thực hiện và duy trì.

HTML:

<div class="examplediv customstyle" 
    my-transparent="settings.Window.Transparent" 
    my-bgcolor="{{settings.Window.BackgroundColor}}"> 
</div> 

Lưu ý: Sử dụng {{settings.Window.BackgroundColor}} để vượt qua giá trị của tài sản và không phải là một String.

Chỉ thị:

myApp.directive('customstyle', function() { 
    return { 
     restrict: 'AC', 
     link: function (scope, element, attrs) {   
      scope.$watch(attrs.myTransparent, function (value) {  
      element.css('background-color', (value ? 'transparent' : attrs.myBgcolor));    
      });      
     } 
    } 
}); 

Lưu ý: Sử dụng element.css() để thay đổi thuộc tính CSS trực tiếp trên phần tử.

jsFiddler: http://jsfiddle.net/jYQc6/8/

Answer 2

Tôi đã có cùng một vấn đề và sử dụng giải pháp bmleite của giải quyết nó. Tôi đã có một phần tử tùy chỉnh với một thuộc tính tùy chỉnh rất giống với thuộc tính ở trên và thay đổi chỉ thị được áp dụng trên một DIV thông thường thay vì thuộc tính tùy chỉnh đã sửa nó cho tôi.

Trong giải pháp của tôi, tôi cũng có dòng mã sau đây ngay sau khi các phần tử đã được sửa đổi:

$compile(element.contents())(scope); 

Hãy nhớ để tiêm dịch vụ $ biên dịch trong phần khai báo hàm chỉ thị:

myApp.directive('directiveName', function ($compile) { ... 

Cảm ơn bạn đã đăng bài tuyệt vời!