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

    };
});

これがフィドルです。「Inspectme」には、data-bubble属性がある場合は灰色になり、それ以外の場合は背景が表示されません。