Kann ngClass nicht mit angular UI verwenden Bootstrap-Warnung

Question

Ich verwende die uib-alert Direktive, aber ich möchte das Schließen der Warnung mit Bootstrap eigene fade Klasse oder andere benutzerdefinierte Animationen, die ich hinzufügen animieren. Ich habe einige andere Versuche gesehen, diese Frage zu beantworten, aber keine war wirklich befriedigend.

Vorherige Antworten sind entweder veraltet (AngularJS/UI Bootstrap - fading out alert on remove) oder verlassen sich auf CSS-Klassen .ng-enter und .ng-leave wenn Winkelhinzufügt oder entfernt Dinge aus dem DOM (How to add animation to angularjs uib-alert directive)

Ich würde eine Implementierung bevorzugen, die

1. ist

   Mehr deklarative:

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

2. Einfachere die Animation für jeden Alarm

   <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, führt zu einer Konsole Fehler anzupassen:

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

Ich habe auch bemerkt dies in der resultierenden Markup, aber, seltsamerweise sehe ich diese Zeichenfolge Verkettung oder Ternär nicht irgendwo in der Quelle definiert (nicht in Alarmvorlage oder alert.js):

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

There is also a question die ngAnimate zu verwenden versucht, dieses Problem zu lösen, aber ngAnimate seems to have no effect on this directive mit der neuesten Version aller Pakete:

Answer 1

Statt ng-class verwenden type="{{alert.type}}". Dies wird das Problem lösen Plunker

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