mgcrea.ngStrap.alert
Alerts are styled tiny dialogs that inherit the behavior of modals.
Alerts require the modal plugin to be included.
$scope.alert = {{alert | json}};
Append a bs-alert
attribute to any element to enable the plugin.
$alert
serviceAvailable 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 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: |
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 |
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. |
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'
});
})
Methods available inside the directive scope to toggle visibility.
Reveals the alert.
Hides the alert.
Toggles the alert.