Modal Directive

The modal directive provides a reusable base for the creation of further modal dialogs.

Usage

The modal directive must be applied as an attribute. Any content within the modal element will be transcluded into the modal.

<a ng-click="openModal()">Open Modal</a>
<div modal="myModal">
    <h2>My Modal's Header</h2>
    <p>My modal content.</p>
</div>

Then in your controller, add a method to open the modal, referencing the modal's name.

angular.module('ModalDemo', ['ModalModule'])
.controller(['$scope', 'ModalService', function ($scope, ModalService) {
    $scope.openModal = function () {
        ModalService.openModal('myModal');
    };
}]);

Arguments

Param	Type	Details
modal	String	The name of the modal. This must be unique across a page.

Events

The modal directive fires two events, one when opening and one when closing. The modal:open and modal:close events are fired with the name of the modal as an argument.

$scope.$on('modal:open', function (event, name) {
    console.log('my modal name is ', name);
});