Add a timeout to clear message automatically feature

[map7]

I needed a feature which would clear the messages after so many seconds when creating a new flash message.

[regis-leray]

I like this feature UP

[gtramontina]

Hey,
First of all sorry! I totally missed this one... Second thank you for your input.

I've done "auto hide" flash messages before with ngAnimate and CSS. So I quickly put this plnkr together to demonstrate http://embed.plnkr.co/y1INk36bPbW7GaX15QbQ/preview
The flash-messages.css stylesheet is where the magic happens, specially line 20 where we set the 3 seconds delay for the hide animation.
Does it help you in any way?

Regarding including html messages, that's a nice feature. I'm just going to double check how to make it work with the latest version of angular's SCE. If I'm not mistaken if you don't include ngSanitize in your project and are using ng-html-bind-unsafe, angular renders nothing. Would you mind double checking this as well? And perhaps send another pull request, so we could split this one?

Cheers,
-g

[gtramontina]

By the way, for the sake of knowledge sharing, if you wanted html as flash messages to be able to add something like bootstrap icons: <i class="icon-info-sign">Success - you could use CSS pseudo elements to display such icons, like this:

#loading-messages .error:before,
#loading-messages .warning:before,
#loading-messages .info:before,
#loading-messages .success:before {
  display: inline-block;
  width: 1em;
  font-family: 'FontAwesome';
  margin-right: 4px
}

#loading-messages .error:before { content: '\f057'; }
#loading-messages .warning:before { content: '\f071'; }
#loading-messages .info:before { content: '\f06a'; }
#loading-messages .success:before { content: '\f058'; }

Cheers,
-g

[luisfdeandrade]

@map7 that is exactly what i was looking for.

@gtramontina thanks for sharing those CSS snippets, i want do close my flash message using this.

[gtramontina]

@luisfdeandrade you're saying you +1 the pull request or using CSS only (http://embed.plnkr.co/y1INk36bPbW7GaX15QbQ/preview) satisfy your needs? Or were you talking about the FontAwesome icons?

EDIT: you're welcome anyway. :-)

[Traxmaxx]

+1 for timeout. Otherwise it seems not possible to clear the flash-messages

[luisfdeandrade]

i just added to my directive template and worked fine, using same structure like twitter bootstrap.

<button type="button" class="close" data-dismiss="alert" aria-hidden="false">&times;</button>