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>