<commit_before># angular-notification-icons
Add notification popups to any element http://jemonjam.com/angular-notification-icons

[![Build Status](https://travis-ci.org/jacob-meacham/angular-notification-icons.svg?branch=develop)](https://travis-ci.org/jacob-meacham/angular-notification-icons)
[![Coverage Status](https://coveralls.io/repos/jacob-meacham/angular-notification-icons/badge.svg?branch=develop)](https://coveralls.io/r/jacob-meacham/angular-notification-icons?branch=develop)
[![Code Climate](https://codeclimate.com/github/jacob-meacham/grunt-lcov-merge/badges/gpa.svg)](https://codeclimate.com/github/jacob-meacham/grunt-lcov-merge)

![demo](http://i.imgur.com/F9qc7Uw.gif)

```js
<notification-icon count='scopeVariable'>
  <i class="fa fa-envelope-o fa-3x"></i>
</notification-icon>
```

## Getting Started
### 1. Install bower components
```shell
bower install angular-notification-icons --save
```

### 2. Add css and scripts
```html
<link rel="stylesheet" href="bower_components/angular-notification-icons/angular-notification-icons.min.css">

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script> <!-- Not required, but recommended -->
<script src="bower_components/angular-notification-icons/angular-notification-icons.min.js"></script>
```

### 3. Add a dependency to your app
```
angular.module('MyApp', ['angular-notification-icons', 'ngAnimate']); // ngAnimate is only required if you want animations
```

### 4. Add a notification-icon element around any other element
```html
<notification-icon count='scopeVariable'>
  ...
</notification-icon>
```

angular-notification-icons is an angular directive that adds a notification popup on top of any element. The counter is tied to a scope variable and updating the count is as easy as updating the scope variable. angular-notification-icons comes with a number of canned animations and a default style, but it is easy to add your own styles or custom animations. angular-notification-icons can also optionally listen for DOM events and clear the count on a DOM event.

angular-notification-icons has been tested with angular 1.3.x, and 1.4.x. It will probably work with most recent versions of angular and angular-animate, but make sure that angular and angular-animate versions match.

## Demo App
To run the demo app, run `npm install`, and then `gulp serve`.

## Basic Usage

### Counter
The only required attribute for angular-notification-icons is 'count'. This uses two-way binding to bind a scope variable to the isolate scope. This makes updating the count very simple, since your controller has full control over how it's set.
```html
<notification-icon count="myScopeVariable">
    ...
</notification-icon>
```
When myScopeVariable is <= 0, the notification icon will not be visible. Once myScopeVariable > 0, the notification will show up.

[Live Demo](http://jemonjam.com/angular-notification-icons#basic)

### Built-in Animations
angular-notification-icons comes with a few prebuilt animations for your use. Note that these are only available if you are using the ngAnimate module
<commit_msg>Update readme.<commit_after># angular-notification-icons
Add notification popups to any element http://jemonjam.com/angular-notification-icons

[![Build Status](https://travis-ci.org/jacob-meacham/angular-notification-icons.svg?branch=develop)](https://travis-ci.org/jacob-meacham/angular-notification-icons)
[![Coverage Status](https://coveralls.io/repos/jacob-meacham/angular-notification-icons/badge.svg?branch=develop)](https://coveralls.io/r/jacob-meacham/angular-notification-icons?branch=develop)
[![Code Climate](https://codeclimate.com/github/jacob-meacham/grunt-lcov-merge/badges/gpa.svg)](https://codeclimate.com/github/jacob-meacham/grunt-lcov-merge)

![demo](http://i.imgur.com/F9qc7Uw.gif)

```js
<notification-icon count='scopeVariable'>
  <i class="fa fa-envelope-o fa-3x"></i>
</notification-icon>
```

## Getting Started
### 1. Install bower components
```shell
bower install angular-notification-icons --save
```

### 2. Add css and scripts
```html
<link rel="stylesheet" href="bower_components/angular-notification-icons/angular-notification-icons.min.css">

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script> <!-- Not required, but recommended -->
<script src="bower_components/angular-notification-icons/angular-notification-icons.min.js"></script>
```

### 3. Add a dependency to your app
```
angular.module('MyApp', ['angular-notification-icons', 'ngAnimate']); // ngAnimate is only required if you want animations
```

### 4. Add a notification-icon element around any other element
```html
<notification-icon count='scopeVariable'>
  ...
</notification-icon>
```

angular-notification-icons is an angular directive that adds a notification popup on top of any element. The counter is tied to a scope variable and updating the count is as easy as updating the scope variable. angular-notification-icons comes with a number of canned animations and a default style, but it is easy to add your own styles or custom animations. angular-notification-icons can also optionally listen for DOM events and clear the count on a DOM event.

angular-notification-icons has been tested with angular 1.3.x, 1.4.x, and 1.5.x. It will probably work with most recent versions of angular and angular-animate.

## Demo App
To run the demo app, run `npm install`, and then `gulp serve`.

## Basic Usage

### Counter
The only required attribute for angular-notification-icons is 'count'. This uses two-way binding to bind a scope variable to the isolate scope. This makes updating the count very simple, since your controller has full control over how it's set.
```html
<notification-icon count="myScopeVariable">
    ...
</notification-icon>
```
When myScopeVariable is <= 0, the notification icon will not be visible. Once myScopeVariable > 0, the notification will show up.

[Live Demo](http://jemonjam.com/angular-notification-icons#basic)

### Built-in Animations
angular-notification-icons comes with a few prebuilt animations for your use. Note that these are only available if you are using the ngAnimate module

{'fraction_non_alphanumeric': 0.12302788844621514, 'fraction_numerical': 0.004462151394422311, 'mean_word_length': 5.0813953488372094, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 37, 'https://': 12, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2666397', 'n_tokens_mistral': 1839, 'n_tokens_neox': 1740, 'n_words': 583}