Utknąłem tworząc niestandardową dyrektywę stylu CSS

Question

Dla jedynego edytora wizualnego próbuję stworzyć nową dyrektywę, która zapisuje styl CSS. Utknąłem w próbach uaktualnienia dyrektywy po kliknięciu pola wyboru, aby uczynić właściwość koloru tła przezroczystą.

Oto mój (bez pracy) dyrektywy:

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

i html elementem:

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

Oto jsfiddle sytuacji: http://jsfiddle.net/psinke/jYQc6/

Każda pomoc będzie mile widziana.

Answer 1

Spróbuj użyć dyrektywy bezpośrednio na elemencie, który chcesz zmienić, łatwiej to zrobić i zachować.

HTML:

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

Uwaga: Użycie {{settings.Window.BackgroundColor}} przekazać wartość właściwości, a nie ciąg.

dyrektywa:

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

Uwaga: Użycie element.css() zmienić właściwości CSS bezpośrednio na elemencie.

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

Answer 2

I było to, że ten sam problem, stosując roztwór bmleite za rozwiązany. Miałem niestandardowy element z niestandardowym atrybutem bardzo podobnym do powyższego, a zmiana dyrektywy, która ma być zastosowana w zwykłym DIV zamiast niestandardowego atrybutu, naprawiła go dla mnie.

W moim rozwiązanie mam również następujące linijki kodu tuż po element został zmodyfikowany:

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

Pamiętaj, aby wprowadzić usługę $ kompilacji w deklaracji funkcji dyrektywy:

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

Dzięki za świetny post!