Angular Bootstrap modal window encapsulated in angular provider.
- Angular: >1.2.28
- Angular-bootstrap: ~0.14.3
Download plugin
bower install angular-alert-provider --save-dev
Add lib into script
<script type="text/javascript" src="../bower_components/angular-alert-provider/dist/alertProvider.min.js"></script>
Include provider into angular module dependency:
angular.module('App', ['$alertProvider']);
$scope.openModal = function () {
var actionYes = function () {
console.log('clicked yes');
};
var actionNo = function () {
console.log('clicked no');
};
var alert = $alertProvider.open({
title: 'Modal title',
body: 'Do you confirm deleting element?',
buttons: [
{
label: 'Yes',
cssClass: 'btn btn-primary',
action: actionYes
},
{
label: 'No',
cssClass: 'btn btn-danger',
action: actionNo
}
]
});
};
Result:
Install external dependencies
bower install
npm install
Run grunt command in order to serve example page on http://localhost:3001 host.
grunt serve
-
Provider allows to use angular bootstrap options (documentation)
-
title (required): Title of modal dialog.
-
body (required): Body of modal dialog.
-
buttons (required): Collection of buttons:
- label: - button label.
- cssClass: - css class of button.
- action: - callback triggered once clicked on button.
buttons: [
{
label: 'Yes',
cssClass: 'btn btn-primary',
action: actionYes
},
{
label: 'No',
cssClass: 'btn btn-danger',
action: actionNo
}
]
- templateUrl (optional): Provider allows to change tempalate. Here you can set different template url in order to change structure of modal.
- 0.1.0 First version.