angular-ui-bootstrap - 无法将 ngClass 与 Angular UI Bootstrap Alert 一起使用

Question

我正在使用 uib-alert指令，但我想用 Bootstrap 自己的 fade 动画关闭警报类，或我添加的其他自定义动画。我已经看到其他一些尝试来回答这个问题，但没有一个真正令人满意。

以前的答案要么过时( AngularJS/UI Bootstrap - fading out alert on remove )，要么依赖 CSS 类 .ng-enter和 .ng-leave当 angular 在 DOM 中添加或删除内容时 ( How to add animation to angularjs uib-alert directive )

我更喜欢一个实现

更具声明性:
<uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" ng-class="fade: alert.expired" close="closeAlert($index)">{{alert.msg}}</uib-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 , 导致控制台错误:
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]].
我也在结果标记中注意到了这一点，但奇怪的是，我没有在源代码中的任何地方看到这个字符串连接或三元定义(不是在警报模板或警报.js 中):
ng-class="['alert-' + (type || 'warning'), closeable ? 'alert-dismissible' : null]"
There is also a question尝试使用 ngAnimate 来解决这个问题，但是 ngAnimate seems to have no effect on this directive使用所有软件包的最新版本:

Answer 1

而不是 ng-class , 使用 type="{{alert.type}}" .这将解决问题Plunker

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