坚持创建自定义的CSS样式指令 [英] Stuck creating a custom css style directive

问题描述

有关独可视化编辑器我试图创建一个新的指令，写一个CSS样式。我被困在试图获得该指令时，点击复选框，使background-color属性透明的更新。

For an only visual editor I'm trying to create a new directive that writes a CSS style. I'm stuck at trying to get the directive to update when a checkbox is clicked to make the background-color property transparent.

下面是我的（非工作）指令：

Here's my (non-working) directive:

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

和HTML元素：

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

下面的的情况的jsfiddle： http://jsfiddle.net/psinke/jYQc6/

Here's a jsfiddle of the situation: http://jsfiddle.net/psinke/jYQc6/

任何帮助将大大AP preciated。

Any help would be greatly appreciated.

推荐答案

尝试直接使用指令要更改的元素，这是容易做到和维护。

Try using the directive directly on the element you want to change, it's easier to do and to maintain.

HTML

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

注意：使用 {{} settings.Window.BackgroundColor} 传递属性的值，而不是一个String

Note: Use {{settings.Window.BackgroundColor}} to pass the property's value and not a String.

指令：

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

注意：使用 element.css（）直接在元素上改变CSS属性

Note: Use element.css() to change CSS properties directly on the element.

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

这篇关于坚持创建自定义的CSS样式指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！