8

对于唯一的可视化编辑器，我正在尝试创建一个编写 CSS 样式的新指令。当单击复选框以使 background-color 属性透明时，我一直试图让指令更新。

这是我的（非工作）指令：

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/

任何帮助将不胜感激。

4

2 回答 2

17

尝试直接在要更改的元素上使用该指令，它更容易执行和维护。

HTML：

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

注意：{{settings.Window.BackgroundColor}}用于传递属性的值而不是字符串。

指示：

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 属性。

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

于 2013-01-14T14:03:51.373 回答
1

我遇到了同样的问题，使用 bmleite 的解决方案解决了它。我有一个自定义元素，其自定义属性与上面的非常相似，并且更改了要应用于常规 DIV 的指令，而不是自定义属性为我修复了它。


在我的解决方案中，在元素被修改后，我也有以下代码行：

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


记得在指令函数声明中注入 $compile 服务：

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


谢谢你的好帖子！

于 2013-05-08T22:00:13.550 回答