Bloccato la creazione di una direttiva di stile css personalizzata

Question

Per un solo editor visuale sto provando a creare una nuova direttiva che scrive uno stile CSS. Sono bloccato a cercare di ottenere l'aggiornamento della direttiva quando si fa clic su una casella di controllo per rendere trasparente la proprietà background-color.

Ecco la mia (non funzionante) direttiva:

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

e html elemento:

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

Ecco un jsfiddle della situazione: http://jsfiddle.net/psinke/jYQc6/

Qualsiasi aiuto sarebbe molto apprezzato.

Answer 1

Provare a utilizzare la direttiva direttamente sull'elemento che si desidera modificare, è più facile da fare e da mantenere.

HTML:

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

Nota: utilizzare {{settings.Window.BackgroundColor}} per passare il valore della proprietà e non una stringa.

direttiva:

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

Nota: utilizzare element.css() per modificare le proprietà CSS direttamente sull'elemento.

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

Answer 2

ho avuto lo stesso problema e utilizzando la soluzione di bmleite risolto. Ho avuto un elemento personalizzato con un attributo personalizzato molto simile a quello sopra, e la modifica della direttiva da applicare su un DIV regolare invece dell'attributo personalizzato l'ha risolto per me.

Nella mia soluzione Ho anche la seguente riga di codice dopo l'elemento è stato modificato:

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

Ricordati di iniettare il servizio $ compilazione nella dichiarazione della funzione direttiva:

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

Grazie per un ottimo post!