Geek Answers Handbook

Unable to use ngClass With Angular UI Loading Warning

I use the directive uib-alert, but I would like to animate the closure of the alert using the native fadeBootstrap class or other custom animations that I add. I saw several other attempts to answer this question, but none of them were really satisfactory.

The previous answers are either outdated ( AngularJS / UI Bootstrap - warning disappears when deleted ), or rely on CSS classes .ng-enterand .ng-leavewhen angular adds or removes things from the DOM ( How to add animation to the uil-alert angularjs directive )

I would prefer an implementation

  • More declarative:

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

  • 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>

When trying to use ngClass with this directive , a console error occurs:

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 enough, I do not see this concatenation or triple of lines anywhere in the source (not in the warning or alert.js template):

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

There is also a question that tries to use ngAnimate to solve this problem, but ngAnimate does not seem to affect this directive with the latest version of all packages:

+4
source share
1 answer

ng-classUse instead type="{{alert.type}}". This will solve the plunker problem .

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

More articles:


All Articles