mgcrea.ngStrap.modal
Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
$scope.modal = {{modal | json}};
Backdrop animation being powered by ngAnimate
, it requires custom CSS.
.modal-backdrop.am-fade {
opacity: .5;
transition: opacity .15s linear;
&.ng-enter {
opacity: 0;
&.ng-enter-active {
opacity: .5;
}
}
&.ng-leave {
opacity: .5;
&.ng-leave-active {
opacity: 0;
}
}
}
Append a bs-modal
attribute to any element to activate the directive.
$modal
serviceAvailable for programmatic use (inside a directive/controller).
angular.module('myApp')
.controller('DemoCtrl', function($scope, $modal) {
// Show a basic modal from a controller
var myModal = $modal({title: 'My Title', content: 'My Content', show: true});
// Pre-fetch an external template populated with a custom scope
var myOtherModal = $modal({scope: $scope, template: 'modal/docs/modal.tpl.demo.html', show: false});
// Show when some event occurs (use $promise property to ensure the template has been loaded)
$scope.showModal = function() {
myOtherModal.$promise.then(myOtherModal.show);
};
})
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-modal
attribute
Name | type | default | description |
---|---|---|---|
animation | string | am-fade | apply a CSS animation powered by ngAnimate |
backdropAnimation | string | am-fade | apply a CSS animation to backdrop powered by ngAnimate |
placement | string | 'top' | how to position the modal - top | bottom | center (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 |
html | boolean | false | replace ng-bind with ng-bind-html , requires ngSanitize to be loaded |
backdrop | boolean or the string 'static'
|
true | Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. |
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: |
template | path | false |
If provided, overrides the default template, can be either a remote URL or a cached template id. It should be a |
contentTemplate | path | false |
If provided, fetches the partial and includes it as the inner content, can be either a remote URL or a cached template id. |
prefixEvent | string | 'modal' |
If provided, prefixes the events '.hide.before' '.hide' '.show.before' and '.show' with the passed in value. With the default value these events are 'modal.hide.before' 'modal.hide' 'modal.show.before' and 'modal.show' |
You can override global defaults for the plugin with $modalProvider.defaults
angular.module('myApp')
.config(function($modalProvider) {
angular.extend($modalProvider.defaults, {
animation: 'am-flip-x'
});
})
Methods available inside the directive scope to toggle visibility.
Reveals the modal.
Hides the modal.
Toggles the modal.