CSS内容attr（）已设置，但未显示

Question

我正在尝试在我的网上商店用CSS和AngularJS制作一个徽章柜台。我在Angular中有一个指令，它将属性添加或删除到实现'badgeDirective'的HTML元素。像这样：

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>