问题描述
有关独可视化编辑器我试图创建一个新的指令,写一个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:
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 :
这篇关于坚持创建自定义的CSS样式指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!