大佬教程收集整理的这篇文章主要介绍了javascript – 如何在装饰器中访问ngStyle键和值？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
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;
});
我尝试使用正则表达式来提取模式等并检查元素,但是,似乎错误的方法来解决问题,因为我必须手动更新字符串并将其传递给基本链接功能.
如果有更好的方法来做我想做的事,请告诉我.
可以在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>
以上是大佬教程为你收集整理的javascript – 如何在装饰器中访问ngStyle键和值？全部内容，希望文章能够帮你解决javascript – 如何在装饰器中访问ngStyle键和值？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。