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-alertattribute to any element to enable the plugin.

The module also exposes an $alertservice

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 titleattribute isn't present
content string '' default content value if data-contentattribute isn't present
type string 'info' default content value if data-typeattribute isn't present
keyboard boolean true Closes the alert when escape key is pressed
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.
template path false

If provided, overrides the default template, can be either a remote URL or a cached template id.
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 (×).

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.