angular-modal-service2

Standalone AngularJS service for showing modals (using bootstrap)

Installation

$ npm i -D angular-modal-service2

or

$ bower install angular-modal-service2

Usage

// 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>