Angular Modal Service Example

Creating a Modal Service

To make a custom modal service you first need to reference the Angular UI Bootstrap script And Angular Modal Service in your main page:

<script src="scripts/bootstrap.js"></script>

<script src="scripts/angular-modal-service.min.js"></script>

Add a dependency in your application

var app = angular.module('myApp',['angularModalService'])

Modal in your Controller

Inject ModalService into your controller, directive or service and call the displayModal() function to show a modal:

app.controller('MyController', function($scope, ModalService) {

  ModalService.displayModal({
    templateUrl: "template/modalTemplate.html",
    controller: "MyModalController"
  }).then(function(modal) {
    //it's a bootstrap element, use 'modal' to show it
    modal.element.modal();
    modal.close.then(function(result) {
      console.log(result);
    });
  });
);

You will invoked "displayModal()" on clicking of the button. This function will load HTML from template/modalTemplate.html and adds it to DOM. MyModalController a separate controller specific to the Modal only. Please follow the comment mentioned in the code ass well.

Later on the above code will create the instance of MyModalController.

When this is done, the promise returned by the displayModal() function resolves and you get a modal object. This object contains the element created. If it's a Bootstrap modal just call modal to show it.

The controller that is created always has one extra parameter injected into it - a function called close. Call this function to close the modal, anything you pass to it is passed to the caller as the result object. You can use this result object in promise.

You can pass a number of milliseconds to wait before destroying the DOM element as an optional second parameter to close() function.

app.controller('MyModalController', function($scope, close) {
  close("Hello World!");
});

Example - Click Here