Angular: Equivalent of ng:class for custom attributes?

Question

Angular: Equivalent of ng:class for custom attributes?

In Angular, imagine a case like:

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

Where I don't want the data-bubble attribute to appear in the DOM at all if unread_badge_counts.bcal = 0.

I was expecting to find a directive similar to ng:class, which would let me stick a little conditional in there. But I'm not seeing anything about this in the docs. Suggestions?

angularjs

Answer 1

You could create a simple directive just for this purpose:

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

    };
});

Here's a fiddle. The "Inspect me" will be gray if there's a data-bubble attribute on it, no background otherwise.