使用 angularjs 动态设置伪元素样式

Question

我有一个 div 如下所示：

<div class="circle-icon"><span class="icon icon-loanaccount"></span></div>

并且此 div 标签具有以下样式：

.circle-icon {      
  background: #db552d none repeat scroll 0 0;      
  width: 50px;
  &::after{
    border-bottom: 5px solid #db552d;
    content: "";
    height: 0;
    position: absolute;        
  }&:before{
     border-bottom: 5px solid #db552d;
     content: "";
     height: 0;        
   }      
}

如何使用 angular 动态设置 border-bottom 样式，假设我有我想在 scope.borderColor 中使用的颜色？

Answer 1

ng-style是你的朋友，看working link这里。

$scope.bordercolor = "thick dotted #ff0000";

<div class="circle-icon" ng-style ="{'border-bottom': bordercolor}">
    <span class="icon icon-loanaccount"></span>
</div>

使用 angularjs 动态设置伪元素样式

Dynamically styling pseudo elements with angularjs

css

pseudo-element

angularjs

angularjs-directive