Shravan Jain Shravan Jain - 14 days ago 17x
AngularJS Question

How to make custom directive with dialog box template using Angular JS?

I need to show a confirmation box on different pages. So i have decided to create a custom directive for performing this task. I have a html template for confirmation box.There are two buttons and some text in this template. One button is for cancelling the dialog box and one for submitting it. So the functionality will be different for each page when we click on submit button. I have couple of questions regarding this issue.

  1. How to create this kind of directive to show a dialog box on some condition?

  2. How to pass text from my controller to this template?

  3. How to override the "Submit" button functionality.


I had similar requirement where I wanted a custom modal pop-up to alert the user to continue with his actions such as delete, modify etc.., So I wrote a custom directive. Below is the code.

'use strict';

angular.module('mainApp').directive('confirm', ['$log','$uibModal', function($log,$uibModal){
    var link = function($scope,elem,attr){
            var modalInstance = ${
                  animation: true,
                  templateUrl: 'templates/shared/_confirm_modal.html',
                  controller: 'confirmDirectiveCtrl',
                  size: 'sm'
                  ,backdrop: 'static' //disables modal closing by click on the backdrop.
                  ,resolve: {
                    requiredVerbose: function(){
                        var requiredVerbose = {
                            modalTitle  : attr.modalTitle
                            ,message    : attr.message
                            ,confirmVerbose :   attr.confirmVerbose
                            ,cancelVerbose  :   attr.cancelVerbose
                        } ;
                        return requiredVerbose;

                }, function(){
        restrict    :   'A'
        ,scope : {
            confirmFn : '&'
            ,cancelFn  : '&'
        ,compile : function compile(elem,attr){
            if(attr.confirmType && attr.confirmType=='delete')
                attr.modalTitle = 'Warning';
                attr.confirmVerbose = 'Delete';
                attr.cancelVerbose = 'No';
                attr.message = 'Are you sure, you want to delete?'
                if(!attr.modalTitle){attr.modalTitle = 'Warning'}
                if(!attr.confirmVerbose){attr.confirmVerbose = 'Ok'}
                if(!attr.cancelVerbose){attr.cancelVerbose = 'cancel'}
                if(!attr.message){attr.message = 'Are you sure?'}

                post : link

angular.module('mainApp').controller('confirmDirectiveCtrl', ['$scope','$uibModalInstance','requiredVerbose',
    function($scope,$uibModalInstance, requiredVerbose){

    $scope.modalTitle= requiredVerbose.modalTitle;
    $scope.message = requiredVerbose.message;
    $scope.confirmVerbose = requiredVerbose.confirmVerbose;
    $scope.cancelVerbose= requiredVerbose.cancelVerbose;

    $scope.ok = function(){

    $scope.cancel = function(){


To answer your questions,

  1. This is attribute type directive. And the element on which you add this directive tag is bound to onclick function which generates the required popup.

  2. How to pass text? You can pass the required text through attributes. I wanted this directive to work only for two kinds of alerts and hence had only two different sets of texts. If you want custom texts everytime, you can pass them to directive through attrs.

  3. How to override the submit functionality? You can pass your custom submit and cancel to this directive and bind them to the popup submit and cancel functions. The above code does the same.

Edit : HTML template and explanation:

Below is an example describing on how you can use this directive.

<i class="fa fa-trash-o" 

The above template is an trash icon. The attributes are

  1. directive name : confirm

  2. confirm-fn : The function that should be called after user seleting ok/submit etc..,

  3. confirm-type : This attribute defines what type of popup you want to show. In my case, I often use 'delete' type and hence wrote the required verbose related to it. By default, I already defined the verbose(title, message, ok-button, cancel-button).

If you want your custom messages add them in the attributes. Below is one such example.

<i class="fa fa-trash-o" 
   modal-title="My Modal"
   message="How are you doing?"
   cancel-verbose="Just Fine">

I hope, this helps