A simple directive/componenet that generates a button which on click instantiates a customizable modal. Includes a method for executing service calls from the template.
This component requires ngDialog and angular-toastr
npm
npm install ng-dialog angular-toastr angular-modal-button
js
<body>
<script src="js/angular-toastr.tpls.js"></script>
<script src="js/ngDialog.js"></script>
<script src="js/angular-modal-button.min.js"></script>
</body>css
<link rel="stylesheet" type="text/css" href="node_modules/ng-dialog/css/ngDialog-theme-default.css">
<link rel="stylesheet" type="text/css" href="node_modules/angular-toastr/dist/angular-toastr.css">var app = angular.module('myApp', ['ngDialog', 'toastr', 'modal-btn'])<modal-button>
template = "'url-to-template'"
tmpl-scope-object = "{name: 'some-name', age: 00}"
button-label = "'some-label'"
method = "'some-method-name-matching-service'"
service = "'some-service-name'"
button-class = "'some-class'"
modal-class = "'some-class'">
</modal-button>| Param | Type | Details |
|---|---|---|
| template | String | url for the template |
| tmplScopeObject(optional) | Object | Object containing data which will be made available in modal on $scope |
| button-label(optional) | String | Label that will appear on the button if none is set it will default to the method name |
| method(optional) | String | Method to be called on service |
| service(optional) | String | Name of service to be executed from template if any |
| button-class(optional) | String | button class(es) to be applied, if none defaults to bootstrap default |
| modal-class(optional) | String | class to be applied to the modal |
| all | String | object containing all the above |