Comment faire pour modifier le style avant/après Angulaire?

Je suis en train de mettre en œuvre la chapelure avec des triangles à l'aide de avant/après dans le CSS, comme indiqué dans ce tutoriel:

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

Pertinents extraits de:

<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; 
}

Cependant, je l'utilise comme un flux orienté, quelque chose comme:

Main_Category >> Sub_Category >> Détails

Ce flux commence avec Main_Category en surbrillance et 2 autres pièces sombres, et il y a en dessous que vous pouvez sélectionner à partir. Sur sélectionnez, Sub_Category est mis en évidence et un autre apparaît.

Ma question est de savoir comment changer le avant/après de la frontière de couleurs si ils sont pseudo-éléments? Donc, à partir du tutoriel, je pense que peut ce faire sur la partie principale:

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

Mais il n'y a pas pour moi de mettre ng-style avant/après, et le triangle de couleurs finissent inchangé.

J'aimerais voir une réponse qui s'adresse directement cette question. Il n'est pas toujours approprié d'utiliser les classes. Par exemple, j'ai peut-être un grand nombre d'éléments pour que je change l'image de fond basé sur l'ID de l'élément.

OriginalL'auteur WBC | 2014-06-30

  1. 12

    Si je comprends votre question correctement, vous voulez savoir comment utiliser angulaire de la directive dynamiquement le style de l'avant/après le pseudo-balises.

    Au lieu d'utiliser ng de style, l'utilisation ng-classe de joindre une classe qui va déterminer le avant/après de la pseudo classe à utiliser.

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

    Et en 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;
}
    Brillant, le seul changement mineur a été "background: black;" "border-left-color: black;" Merci beaucoup!

    OriginalL'auteur Aaron Greenwald

  2. 0

    Je voudrais éviter d'utiliser ng-style dans ce cas vous pouvez trouver plus facile à utiliser ng-classe et d'appliquer une classe différente en fonction, ce qui vous permettra de garder tous vos CSS en un seul endroit au lieu de remplacer dans le code HTML.

    Simplement modifier votre code pour:

    <li><a href="#" ng-class="{ 'breadcrumb-color': subCategory }">Home</a></li>

    Où la sous-catégorie doit être une valeur booléenne, sur cliquez vous définissez la sous-catégorie, puis il va ajouter un fil d'ariane-la couleur comme une valeur de classe, vous devriez vous retrouver avec quelque chose comme ceci:

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

    Quelques exemples de css, vous pouvez maintenant définir le avant et après que vous s'il vous plaît:

    .breadcrumb-color li a {
    background: red;
}

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

    OriginalL'auteur AndrewMerrell

  3. 0

    ng-classe doit travailler pour ce que vous essayez de faire.

     <li><a href="#" ng-style="ng-class="{beforeCSS: amIBeforeElement()}"">Home</a></li>

    rugueux code exemple

    OriginalL'auteur Delta