无法使用具有Angular UI Bootsrap Alert的ngClass

Question

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

以前的答案要么过时(AngularJS/UI Bootstrap - 删除时淡出警报),要么依赖CSS类.ng-enter,.ng-leave当angular添加或删除DOM中的内容时(如何将动画添加到angularjs uib-alert指令)

我更喜欢这样的实现

1. 更多声明:

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

2. 更容易为每个警报自定义动画

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

尝试将ngClass与此指令一起使用会导致控制台错误:

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]].

我在结果标记中也注意到了这一点,但奇怪的是,我没有在源代码中的任何地方看到此字符串连接或三元定义(不在alert模板或alert.js中):

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

还有一个问题是尝试使用ngAnimate来解决这个问题,但ngAnimate似乎对所有包的最新版本对此指令没有影响:

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>