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

Question

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

以前的答案要么过时（AngularJS/UI Bootstrap - fading out alert on remove），要么在角度添加或删除DOM中的内容时.ng-enter和.ng-leave <{1}}

我更喜欢

的实现

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>

How to add animation to angularjs uib-alert 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]].

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

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

Attempting to use ngClass with this directive尝试使用ngAnimate解决此问题，但There is also a question使用所有软件包的最新版本：

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>