angularjs - Angular：自定义属性的 ng:class 等价物？

Question

在 Angular 中，想象一下这样的情况：

<a href="foo" data-bubble="{{unread_badge_counts.bcal}}">bCal</a>

如果 unread_badge_counts.bcal = 0，我根本不希望数据气泡属性出现在 DOM 中。

我期待找到一个类似于 ng:class 的指令，它可以让我在其中坚持一些条件。但我在文档中没有看到任何关于此的内容。建议？

Answer 1

您可以为此目的创建一个简单的指令：

app.directive('bubble', function() {
    return function(scope, element, attrs) {
        // Whatever the data-bubble attr is set to will
        // be the expression we watch.
        var expr = attrs.bubble;

        scope.$watch(expr, function(val) {
            if (val > 0) {
                element.attr('data-bubble', val);
            } else {
                element.removeAttr('data-bubble');
            }
        });

    };
});

这是一个小提琴。如果上面有data-bubble属性，“Inspect me”将是灰色的，否则没有背景。