# Alerts alert.js

`mgcrea.ngStrap.alert`

## Examples

Alerts are styled tiny dialogs that inherit the behavior of modals.

#### Plugin dependency

Alerts require the modal plugin to be included.

### Live demo clog.info

    $scope.alert = {{alert | json}};

## Usage

Append a `bs-alert`attribute to any element to enable the plugin.

#### The module also exposes an `$alert`service

Available for programmatic use (inside a controller/directive).

              angular.module('myApp')
              .controller('DemoCtrl', function($scope, $alert) {
                var myAlert = $alert({title: 'Holy guacamole!', content: 'Best check yo self, you\'re not looking too good.', placement: 'top', type: 'info', show: true});
              })

### Options

Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to `data-`, as in `data-animation=""`.

For directives, you can naturally inherit the contextual `$scope` or leverage a custom one with an AngularJS expression to evaluate as an object directly on the `bs-aside` attribute

Name | type | default | description
--- | --- | --- | ---
animation | string | am-fade | apply a CSS animation powered by ngAnimate
placement | string | '' | how to position the alert - top | top-left | top-right (requires custom CSS).
title | string | '' | default title value if `title`attribute isn't present
content | string | '' | default content value if `data-content`attribute isn't present
type | string | 'info' | default content value if `data-type`attribute isn't present
show | boolean | true | Shows the alert when initialized.
container | string | false | false | Appends the alert to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the alert in the flow of the document near the triggering element - which will prevent the alert from floating away from the triggering element during a window resize.
controller | string|function | false | Controller fn that should be associated with newly created scope or the name of a registered controller if passed as a string.
controllerAs | string | false | A controller alias name. If present the controller will be published to scope under the `controllerAs` name.
template | string | '' | Provide an html template as a string (when templateUrl is falsy).
templateUrl | path | 'alert/alert.tpl.html' | If provided, overrides the default template, can be either a remote URL or a cached template id. It should be a `div.alert` element following Bootstrap styles conventions (like this).
duration | number | false | false | If provided, the number of seconds the alert should be displayed for before it is automatically closed. Default keeps alert open until explicity closed.
dismissable | boolean | true | Make the alert dismissable by adding a close button (×).
onShow | function |  | If provided, this function will be invoked after the alert is shown.
onBeforeShow | function |  | If provided, this function will be invoked before the alert is shown.
onHide | function |  | If provided, this function will be invoked after the alert is hidden.
onBeforeHide | function |  | If provided, this function will be invoked before the alert is hidden.

#### Default options

You can override global defaults for the plugin with `$alertProvider.defaults`

              angular.module('myApp')
              .config(function($alertProvider) {
                angular.extend($alertProvider.defaults, {
                  animation: 'am-fade-and-slide-top',
                  placement: 'top'
                });
              })

### Scope methods

Methods available inside the directive scope to toggle visibility.

#### $show()

Reveals the alert.

#### $hide()

Hides the alert.

#### $toggle()

Toggles the alert.