Examples

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

Plugin dependency

Alerts require the modal plugin to be included.

Live demo

$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 animation-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 modal when escape key is pressed
show boolean true Shows the modal when initialized.
container string | false false

Appends the popover to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover 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.

Default options

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

        
          angular.module('myApp')
          .config(function($alertProvider) {
            angular.extend($alertProvider.defaults, {
              animation: 'animation-fadeAndSlideTop',
              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.