javascript - 如何在 Angular 中更改之前/之后的样式？

Question

我正在尝试在 CSS 中使用 before/after 实现带有三 Angular 形的面包屑，如本教程所示:

http://css-tricks.com/triangle-breadcrumbs/

相关片段:

<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
</ul>

.breadcrumb li a {
    color: white;
    text-decoration: none; 
    padding: 10px 0 10px 65px;
    background: hsla(34,85%,35%,1); 
    position: relative; 
    display: block;
    float: left;
}

.breadcrumb li a:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;           
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(34,85%,35%,1);
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
}

但是，我将其用作定向流，例如:

Main_Category >> Sub_Category >> 详情

此流程以突出显示的 Main_Category 和其他 2 个黑色部分开始，您可以从下方选择。选择时，Sub_Category 会突出显示并弹出另一个。

我的问题是，如果它们是伪元素，如何更改前/后边框颜色？所以从教程来看，我认为可以在主要部分做到这一点:

<li><a href="#" ng-style="background: {{color}}">Home</a></li>

但是我没有地方可以设置之前/之后的 ng-style，三 Angular 形的颜色最终没有改变。

Answer 1

如果我正确理解你的问题，你想知道如何使用 Angular Directive(指令)动态设置前后伪标签的样式。

不使用 ng-style，而是使用 ng-class 附加一个类，该类将确定要使用哪个前后伪类。

<ul class="breadcrumb">
     <li><a href="#" ng-class="someBooleanInScope? 'color-0' : 'color-1'">Home</a></li>
</ul>

在 CSS 中:

.breadcrumb li a:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;           
    border-bottom: 50px solid transparent;
    border-left: 30px solid hsla(34,85%,35%,1);
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
}

.breadcrumb li a.color-0:after {
    background: black;
}

.breadcrumb li a.color-1:after {
    background: blue;
}