Can't Use ngClass With Angular UI Bootsrap Alert

Question

I'm using the uib-alert directive, but I would like to animate the closing of the alert with Bootstrap's own fade class, or other custom animations that I add. I have seen a few other attempts to answer this question, but none were really satisfying.

Previous answers are either outdated (AngularJS/UI Bootstrap - fading out alert on remove), or rely on CSS classes .ng-enter and .ng-leave when angular adds or removes things from the DOM (How to add animation to angularjs uib-alert directive)

I would prefer an implementation that is

1. More declarative:

   <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" ng-class="fade: alert.expired" close="closeAlert($index)">{{alert.msg}}</uib-alert>

2. Easier to customize the animation for each alert

   <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" ng-class="alert.expired ? alert.closeClass : 'fade'" close="closeAlert($index)">{{alert.msg}}</uib-alert>

Attempting to use ngClass with this directive, results in a console error:

VM329 angular.js:13424 Error: [$parse:syntax] Syntax Error: Token ',' is unexpected, expecting []] at column 75 of the expression [alert.expired ? alert.closeClass || 'fade' ['alert-' + (type || 'warning'), closeable ? 'alert-dismissible' : null]] starting at [, closeable ? 'alert-dismissible' : null]].

I also noticed this in the resulting markup, but, oddly, I don't see this string concatenation or ternary defined anywhere in the source (not in alert template or alert.js):

ng-class="['alert-' + (type || 'warning'), closeable ? 'alert-dismissible' : null]"

There is also a question that attempts to use ngAnimate to solve this problem, but ngAnimate seems to have no effect on this directive with the latest version of all packages:

Answer 1

Instead of ng-class, use type="{{alert.type}}". This will solve the problem Plunker

<div uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)" dismiss-on-timeout= 20>{{alert.msg}}</div>