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

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

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和其他2个部分开始，然后可以从下面进行选择。选择后，Sub_Category突出显示，然后弹出另一个。

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

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

但是我没有地方在前后设置ng样式，并且三角形的颜色最终保持不变。

最佳答案

如果我正确理解了您的问题，那么您想知道如何使用angular指令动态设置伪标签之前/之后的样式。

除了使用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;
}