javascript 如何在 Angular 中更改之前/之后的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24498920/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change style for before/after in Angular?
提问by WBC
I'm trying implement breadcrumbs with triangles using before/after in the CSS, as shown in this tutorial:
我正在尝试在 CSS 中使用 before/after 实现带有三角形的面包屑，如本教程所示：
http://css-tricks.com/triangle-breadcrumbs/
http://css-tricks.com/triangle-breadcrumbs/
Relevant snippets:
相关片段：
<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;
}
However, I'm using it as a directed flow, something like:
但是，我将其用作定向流，例如：
Main_Category >> Sub_Category >> Details
Main_Category >> Sub_Category >> 详情
This flow starts with Main_Category highlighted and other 2 parts dark, and there's a underneath that you can select from. On select, Sub_Category becomes highlighted and another pops up.
此流程以突出显示的 Main_Category 和其他 2 个部分变暗开始，您可以从中选择一个下面的部分。在选择时，Sub_Category 突出显示并弹出另一个。
My question is how to change the before/after border colors if they're pseudo-elements? So from the tutorial, I think can do this on the main part:
我的问题是如果它们是伪元素，如何更改前/后边框颜色？所以从教程中，我认为可以在主要部分做到这一点：
<li><a href="#" ng-style="background: {{color}}">Home</a></li>
But there's no where for me to set ng-style for before/after, and the triangle colors end up unchanged.
但是我没有地方为之前/之后设置 ng-style，三角形颜色最终保持不变。
回答by Aaron Greenwald
If I understand your question correctly, you want to know how to use an angular directive to dynamically style the before/after pseudo-tags.
如果我正确理解您的问题，您想知道如何使用角度指令来动态设置前/后伪标签的样式。
Instead of using ng-style, use ng-class to attach a class that will determine which before/after pseudo class to use.
不使用 ng-style，而是使用 ng-class 附加一个类，该类将确定要使用哪个伪类之前/之后。
<ul class="breadcrumb">
<li><a href="#" ng-class="someBooleanInScope? 'color-0' : 'color-1'">Home</a></li>
</ul>
And in CSS:
在 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;
}
回答by Delta
回答by AndrewMerrell
I would avoid using ng-style in this instance you may find it easier to use ng-class and apply a different class depending, this will allow you to keep all your CSS in a single place rather than overriding within the HTML.
在这种情况下，我会避免使用 ng-style，您可能会发现使用 ng-class 和应用不同的类更容易，这将允许您将所有 CSS 保存在一个地方，而不是覆盖在 HTML 中。
Simply change your code to:
只需将您的代码更改为：
<li><a href="#" ng-class="{ 'breadcrumb-color': subCategory }">Home</a></li>
Where subCategory should be a boolean, on click you set subCategory and then it will add breadcrumb-color as a class value, you should end up with something like this:
subCategory 应该是一个布尔值，点击你设置 subCategory 然后它会添加面包屑颜色作为一个类值，你最终应该是这样的：
<li><a href="#" class="breadcrumb-color">Home</a></li>
Some sample css, now you can set the before and after as you please:
一些示例 css，现在您可以随意设置前后：
.breadcrumb-color li a {
background: red;
}
.breadcrumb-color li a:after {
background: red;
}
