卡住创建自定义css样式指令

对于唯一的可视化编辑器，我试图创建一个写入CSS样式的新指令。我坚持试图在单击复选框时更新指令以使背景颜色属性透明。卡住创建自定义css样式指令

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

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/

任何帮助将不胜感激。

来源

2013-01-14 Peter Sinke

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

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-14 14:03:51 bmleite

感谢您的回答。在页面上，我将使用它，该样式将应用于列表中未知数量的项目，因此在每个项目上设置CSS属性似乎不是正确的方式。我确实设法让它工作。原来，我不得不解析复选框的值为布尔值，以使其工作。我没有替换元素，但改变了它里面的html。我仍然不确定这是否是最好的方法。有更多的学习做我猜。这里是工作jsfiddle：http://jsfiddle.net/psinke/YJxR9/ –

@Peter，$观察将始终返回一个字符串，所以而不是'if（parseBool（myBool））{'你可以简单地这样做：'if （myBool ==“true”）{'。（ng-model将只使用值'true'和'false'作为复选框，所以不需要查找其他可能的布尔值。） –

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

在我的解决方案我也有下面的代码行中的元素已被修改后的权利：

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

记得在指令函数声明注入$编译服务：

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

感谢您的好评！

来源

2013-05-08 22:00:13 Ivan

卡住创建自定义css样式指令

回答

相关问题