angular-flash

Flash messages for Angular.js

Homepage

Angular Core Dependency: ~1

Added by: Sam Deering

GitHub

Repository

gtramontina/angular-flash

Stats

Stars: 101

Watchers: 101

Forks: 25

Module Description

angular-flash

Bitdeli Badge Build Status

Flash messages for Angular.js. Demo

Supports view changes, which means you can set a flash message, navigate to another view and your message will be displayed.

Install

bower install angular-flash-messages

Usage

After adding angular-flash.js to your project, add flash as a dependency to your module. Here is a simple example:

angular.module('myModule', ['flash'])
.controller('EditProductController', function($scope, flash) {
  $scope.save = function() {
    // … save the product
    flash('Saved!');
  };
});

Then, in your HTML, simply add the <flash:messages> element where you want your messages to be displayed. It can be in your main template or individual partials.

  <body ng-app="myModule">
    <flash:messages></flash:messages>

    <main ng:controller="HomeController">
      <h1>Home</h1>
    </main>
  </body>

IE Support

If you need IE8 support (or prefer), you can use the attribute directive: <ol flash:messages></ol>.

Examples

  • flash('My message')
<ol id="flash-messages">
  <li class="success">My message</li>
</ol>
  • flash([ 'Hi!', 'My message' ])
<ol id="flash-messages">
  <li class="success">Hi</li>
  <li class="success">My message</li>
</ol>
  • flash('error', 'Something went wrong…')
<ol id="flash-messages">
  <li class="error">Something went wrong…</li>
</ol>
  • flash([ 'Hi!', { level: 'warning', text: 'This is a warning!' } ])
<ol id="flash-messages">
  <li class="success">Hi</li>
  <li class="warning">This is a warning!</li>
</ol>

License

This is licensed under the feel-free-to-do-whatever-you-want-to-do license.

Module stats last updated: 2017-03-19 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!