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
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.