CSS-контент attr() установлен, но не отображается

Question

Я пытаюсь сделать make-маркер с CSS и AngularJS в своем веб-магазине. У меня есть директива в Angular, которая добавляет или удаляет атрибут для элемента HTML, который реализует «badgeDirective». Как это:

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

HTML, выглядит следующим образом:

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

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

Когда я запускаю сайт, я вижу, что знак на месте, но без знака от фактического счетчика:

я присмотрелся в отладчике и нашел это:

Может кто-нибудь помочь мне с этим? Я понятия не имею, почему значение не отображается ...

Answer 1

Вот как вы можете заставить его работать.

.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>