I did something similar using ng-bind-html, I lacked control, over the content, so I modify a class that'll handle it afterwards
var somecolorvar = "#F00";
$scope.mystyles = ".something:after { color: " + somecolorvar + "; }";
<style ng-bind-html="mystyles"></style>
Then you'll get something like this
<style>.something:after { color: #F00; }</style>
EDIT: You can also handle the issue above via css attr() which will pull the attribute into the content
.something:after {
display: inline;
content: '- Value ' attr(value);
}
<div class="something" value="123">this is</div>
<div class="something" value="456">this be</div>
You'll see something like:
this is - Value 123
this be - Value 456
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
