Standalone AngularJS service for showing modals (using bootstrap)
$ npm i -D angular-modal-service2
or
$ bower install angular-modal-service2
// In your controller
// note use of `@ngInject` flag for ng-annotate
// which prevents minification problems
ModalService.showModal({
templateUrl: '/templates/modal.html',
controller: /*@ngInject*/ function($modal, data) {
var ctrl = this;
ctrl.data = data;
ctrl.clickClose = function(data) {
$modal.close(data);
};
},
controllerAs: 'ctrl',
inputs: {
data: data
}
}).then(function(modal) {
modal.result.then(function(data) {
console.log(data);
})
});<!-- modal.html -->
<div class="modal-backdrop" ng-click="$modal.dismiss()"></div>
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="right btn btn-default btn-sm btn-round"
ng-click="$modal.dismiss()">
<span class="mdi mdi-lg mdi-close"></span>
</button>
<h4 class="modal-title">Modal</h4>
</div>
<div class="modal-body">
<pre>{{ctrl.data}}</pre>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-default"
ng-click="ctrl.clickClose(ctrl.data)">Close</button>
</div>
</div>
</div>
</div>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent