Clever Geek Handbook

Angular: Equivalent to ng: class for custom attributes?

In Angular, imagine a case like this:

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

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

I expected to find a directive similar to the ng: class that would allow me to embellish a bit. But I don't see anything in the docs. Suggestions?

+3


source to share


1 answer


You can 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 is a violin . Inspect Me will be grayed out if there is an attribute on it data-bubble

, otherwise there is no background.

+2


source






More articles:


All Articles