CSS-Inhalt attr() ist gesetzt, aber nicht angezeigt

Question

Ich versuche mo machen einen Badge Counter mit CSS und AngularJS in meinem Webshop. Ich habe eine Direktive in Angular, die dem HTML-Element, das 'badgeDirective' implementiert, ein Attribut hinzufügt oder dieses entfernt. Wie folgt aus:

angular.module('myApp') 
    .directive('badgeDirective', function($timeout){ 
    return function(scope, elem, attrs) { 
     $timeout(function() { 
      elem.addClass('badge-directive'); 
     }, 0); 
     scope.$watch(attrs.badgeDirective, function(newVal) { 
      if (newVal > 0) { 
       elem.attr('badge-counter', newVal); 
      } else { 
       elem.removeAttr('badge-counter'); 
      } 
     }); 
    } 
}); 

Das HTML sieht wie folgt aus:

<md-icon class="material-icons" badge-directive="cart.length" 
aria-label="Cart" >remove_shopping_cart</md-icon> 

Die CSS:

.badge-directive[badge-counter]:after { 
    background: #5da2e2; 
    border-radius: 7px; 
    color: #fff; 
    content: attr(badge-counter); 
    font-size: 10px; 
    font-weight: 600; 
    height: 14px; 
    line-height: 13px; 
    right: -1px; 
    padding: 0 6px; 
    position: absolute; 
    width: 12px; 
    text-align: center; 
    top: 13px; 
} 

Wenn ich die Seite laufen, ich sehe, dass die Plakette an seinem Platz ist, aber kein Zeichen eines tatsächlichen Zählers:

Ich nahm einen genaueren Blick in den Debugger und fanden diese:

jemand mir dabei helfen? Ich habe keine Ahnung, warum der Wert nicht angezeigt wird ...

Answer 1

Hier ist, wie Sie es zur Arbeit bekommen können.

.material-icons[badge-directive]:after { 
 
    background: #5da2e2; 
 
    border-radius: 7px; 
 
    color: #fff; 
 
    content: attr(badge-counter); 
 
    font-size: 10px; 
 
    font-weight: 600; 
 
    height: 14px; 
 
    line-height: 13px; 
 
    right: -1px; 
 
    padding: 0 6px; 
 
    position: absolute; 
 
    width: 12px; 
 
    text-align: center; 
 
    top: 13px; 
 
} 
 

 

 

 
.material-icons { 
 
    display: block; 
 
    position: relative; 
 
    margin-bottom: 1rem; 
 
}

<md-icon class="material-icons" badge-directive="cart.length" 
 
aria-label="Cart" badge-counter="1">remove_shopping_cart</md-icon> 
 

 
<md-icon class="material-icons" aria-label="Cart" >remove_shopping_cart</md-icon>