angular-ui-notification

Angular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animating
8 people use it
Author: 1694858?v=3 alexcrack

angular-ui-notification

Dependency Status devDependency Status Build Status Dependency Status Code Climate

Angular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animations

Features

  • No dependencies except of angular.js.
  • CSS3 Animations.
  • Small size.
  • 5 message types.
  • Use HTML in your messages.
  • Configure options globally py the provider
  • Use custom options by the message
  • Use custom template

Install

To install the package using bower and save as a dependency use... bash bower install angular-ui-notification --save

Usage

Heres a plunker demo

In your html/template add ```html ... ... ...

You can configure module by the provider javascript angular.module('notificationTest', ['ui-notification']) .config(function(NotificationProvider) { NotificationProvider.setOptions({ delay: 10000, startTop: 20, startRight: 10, verticalSpacing: 20, horizontalSpacing: 20, positionX: 'left', positionY: 'bottom' }); }); ...

And when you need to show notifications, inject service and call it!

Service

Module name: "ui-notification"

Service: "Notification"

Configuration provider: "NotificationProvider"

Options

Options can be passed to configuration provider globally or used in the current message.

The options list:

| Option | Possible values | Default value | Description | |-------------------|-------------------|---------------|--------------------------------------------------------------------------| | delay | Any integer value | 5000 | The time in ms the message is showing before start fading out | | startTop | Any integer value | 10 | Vertical padding between messages and vertical border of the browser | | startRight | Any integer value | 10 | Horizontal padding between messages and horizontal border of the browser | | verticalSpacing | Any integer value | 10 | Vertical spacing between messages | | horizontalSpacing | Any integer value | 10 | Horizontal spacing between messages | | positionX | "right", "left" | "right" | Horizontal position of the message | | positionY | "top", "bottom" | "top" | Vertical position of the message | | replaceMessage | true, false | false | If true every next appearing message replace old messages |

Also you can pass the "scope" option. This is an angular scope option Notification scope will be inherited from. This option can be passed only in the methods. The default value is $rootScope

Methods

Notification service methods

| Method name | Description | |----------------------------------------|-------------------------------------------------| | Notification(), Notification.primary() | Show the message with bootstrap's primary class | | Notification.info() | Show the message with bootstrap's info class | | Notification.success() | Show the message with bootstrap's success class | | Notification.warning() | Show the message with bootstrap's warn class | | Notification.error() | Show the message with bootstrap's danger class | | Notification.clearAll() | Remove all shown messages |

Returning value

Every "show" method returns a promise resolves a notification scope with methods:

| Method name | Description | |--------------------------------|------------------------------------------------------------------------------------------------------------------| | notificationScope.kill(isHard) | Remove the specific messageisHard - if false or omitted kill message with fadeout effect (default). If true - immediately remove the message|

Custom Templates

Custom template can be provided.

Default existing scope values is "title" - the title of the message and "message". Also any custom scope's properties can be used.

comments powered by Disqus
This page was last updated about 2 years ago.