let colours = {
mango: '#e59c09',midnight: '#1476a0'
};
我想扩展ngStyle指令,以便能够理解我的自定义颜色名称.我是在decorating ngStyle指令下做的.但是,我在装饰者的编译功能上遇到了一场艰苦的战斗.我可以访问元素的ngStyle属性,但它是一个字符串(可以理解). JSON.parse()不起作用,因为它不一定是有效的JSON字符串,因为绑定一次等…
我只想介入,迭代所有样式键,如果它包含颜色,我想检查值 – 如果它是上述自定义颜色之一,则替换为十六进制.
我似乎无法访问任何ngStyle内部函数,source code令人困惑和短暂;它似乎只是设置元素CSS – $parse在哪里完成它的工作？例如,当ng-style =“{color：ctrl.textColor}”时 – ngStyle源代码中没有任何内容可以提取ctrl.textColour的值.我在找错了地方吗？
无论如何,如何访问ng样式的键值,以便我可以将自定义颜色更改为其十六进制代码？
这是我在装饰者中到目前为止所得到的：
$provide.decorator('ngStyleDirective',function($delegate) {
let directive = $delegate[0];
let link = directive.link;
directive.compile = function(element,attrs) {
// Expression here is a string property
let expression = attrs.ngStyle;
return function(scope,elem,attr) {
// How do I iterate over and update style values here?
// Run original function
link.apply(this,arguments);
}
}
return $delegate;
});
我尝试使用正则表达式来提取模式等并检查元素,但是,似乎错误的方法来解决问题,因为我必须手动更新字符串并将其传递给基本链接功能.
这是plnkr example.
如果有更好的方法来做我想做的事,请告诉我.
解决方法
Anyway,how do I access ng-style key values so that I can change custom colours to its hex codes please?
可以在compile函数中重写ngStyle属性：
directive.compile = function(element,attrs) {
let expression = getExpressions(attrs.ngStyle);
attrs.ngStyle = expression;
return function(scope,attr) {
// Run original function
link.apply(this,arguments);
}
}
JSON.parse()来
如果更新HTML以便键被双引号括起来,则可以使用JSON.parse(),这意味着ng-style属性需要用单引号分隔(尽管如果真的想要,可以尝试转义双引号). ..)
<p ng-style='{ "color": "#e59c09" }'>Hello {{name}}!</p>
<p ng-style='{ "padding": "20px 10px","background-color": "#1476a0","color": "#ddd" }'>It is dark here</p>
然后解析该字符串应该产生一个有效的对象,并且可以使用Object.keys()迭代键,检查单词颜色.如果键包含颜色,则可以使用Array.indexOf检查colors数组中是否存在该值.如果它确实存在于数组中,那么String.replace()可用于替换变量的值(即颜色中的键).
function getExpressions(str) {
var parsed = JSON.parse(str);
Object.keys(parsed).forEach(function(key) {
if (key.indexOf('color') > -1) {
if (Object.keys(colours).indexOf(parsed[key]) > -1) {
str = str.replace(parsed[key],colours[parsed[key]])
}
}
});
return str;
}
请参阅下面的示例中演示的内容.顺便说一句,我不得不删除函数getExpressions()范围内声明的未使用的变量颜色,因为它隐藏了对第3行Here is an updated plunker上面定义的变量的访问.
let app = angular.module('plunker',[]);
let colours = {
mango: '#e59c09',midnight: '#1476a0'
};
app.controller('MainCtrl',function($scope) {
$scope.name = 'World';
});
app.config(function($provide) {
// Extract colour values from the string
function getExpressions(str) {
var parsed = JSON.parse(str);
Object.keys(parsed).forEach(function(key) {
if (key.indexOf('color') > -1) {
if (Object.keys(colours).indexOf(parsed[key]) > -1) {
str = str.replace(parsed[key],colours[parsed[key]])
}
}
});
return str;
}
$provide.decorator('ngStyleDirective',function($delegate) {
let directive = $delegate[0];
let link = directive.link;
directive.compile = function(element,attrs) {
let expression = getExpressions(attrs.ngStyle);
attrs.ngStyle = expression;
return function(scope,attr) {
// Run original function
link.apply(this,arguments);
}
}
return $delegate;
});
});
div + div {
margin-top: 60px;
}
.comment {
font-family: courier;
font-size: 12px;
margin: 15px 0;
}
<script src="https://code.angularjs.org/1.4.12/angular.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
<div>
<p class="comment">--- with hex --</p>
<p ng-style='{ "color": "#e59c09" }'>Hello {{name}}!</p>
<p ng-style='{ "padding": "20px 10px","color": "#ddd" }'>It is dark here</p>
</div>
<div>
<p class="comment">--- with custom colours --</p>
<p ng-style='{ "color": "mango" }'>Hello {{name}}!</p>
<p ng-style='{ "padding": "20px 10px","background-color": "midnight","color": "#ddd" }'>It is dark here</p>
</div>
</div>