angular-flash

Dead simple flash messages for angular.

Homepage

Added by: Sam Deering

GitHub

Repository

remind101/angular-flash

Stats

Stars: 13

Watchers: 13

Forks: 6

Author

Remind
Remind

Module Description

Angular Flash

Build Status

Dead simple flash messages for angular.

Demo

Installation

  1. Install with bower.

  2. Include the ngFlash module:

    angular.module('app', ['ng', 'ngFlash']);
    
  3. Add the flashMessages directive to your html where you want flash messages to appear:

    <div flash-messages></div>
    

Usage

The ngFlash module exposes a $flash service to display flash messages. Here's some examples:

Simple flash message

$flash('Hello World');

Flash message with a custom type

$flash('Hello World', { type: 'info' });

Flash message that persists across a route change

$flash('Hello World', { persist: 1 });

Flash message with a custom duration

$flash('Hello World', { duration: 10000 });

Flash message only within the current scope

$flash('Hello World', { scope: $scope });

Configuration

routeChangeSuccess

Flash messages will, by default, disappear after the user navigates ($routeChangeSuccess). If you're using angular-ui-router, then you should set the event to $stateChangeSuccess:

app.config(function($flashProvider) {
  $flashProvider.setRouteChangeSuccess('$stateChangeSuccess');
});

Template

You can change the template for the flashMessages directive by inserting a custom template into templateCache:

app.run(function($templateCache) {
  $templateCache.put('template/flash-messages.html', '<your template>');
});

Animations

ngFlash is fully compatible with ngAnimate, all you need to do is use the .ng-enter and .ng-leave classes.

Example

.flash-message.ng-enter {
  animation-name: fadeIn;
  animation-duration: 1s;
}

.flash-message.ng-leave {
  animation-name: fadeOut;
  animation-duration: 1s;
}

Module stats last updated: 2017-04-10 16:00:03

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!