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

Question

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.

Answer 1

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.

(function(){
'use strict';

angular.module('mainApp').directive('confirm', ['$log','$uibModal', function($log,$uibModal){
    var link = function($scope,elem,attr){
        elem.bind('click',function(){
            var modalInstance = $uibModal.open({
                  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;
                    }
                  }
            });

            modalInstance.result.then(function(){
                $scope.confirmFn();
                }, function(){
                if($scope.cancelFn){
                    $scope.cancelFn();
                }
            });
        });
    }
    return{
        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?'
            }
            else{
                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?'}
            }

            return{
                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(){
        $uibModalInstance.close($scope.timeline);
    };

    $scope.cancel = function(){
        $uibModalInstance.dismiss();
    };
}]);

}());

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" 
   confirm
   confirm-fn="deletePlaylist($index)"
   confirm-type="delete">
</i>

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" 
   confirm
   confirm-fn="doingGreatFn()"
   cancel-fn="justFineFn()"
   modal-title="My Modal"
   message="How are you doing?"
   confirm-verbose="Great"
   cancel-verbose="Just Fine">
</i>

I hope, this helps

Answer 2

You can create a directive like below to handle both submit & cancel at any page for different functionalities in any controller. I've created an isolated scope directive but you can use change it according to your need by creating child scope scope : true; or bindToController:true (controller specific)

    app.directive('confirm', ['$log', '$modal' ,'$parse','$timeout','factory', function($log, $modal,$parse,$timeout,factory) {
        return {
            restrict: 'E',
            template:'<button type="button" class="btn form-btn" '+
                    'ng-click="openModal()" ng-disabled="disable" >'+
                    '{{buttonName}}</button>',
            replace: true,
            transclude: false,
            scope: {
                name :'=name', //can set button name ..basically u can send a text 
               disable :'=disable' //set as an attribute in HTML to disable button
              },
              link: function ($scope, element, attrs) {

             $scope.buttonName = $scope.name;
             $scope.openModal= function() {

                  $scope.modal = $modal.open({
                      templateUrl: 'customConfirmModal.html',
                      scope:$scope,
                      persist: true,
                      backdrop: 'static'
                  });
              };
             $scope.cancel = function(){
              $scope.modal.dismiss();
             };
             $scope.submit= function(){
              factory.customSubmitCall($scope);//call the factory method which will call different functions depending on the need..
             };
    }

Create a factory to contain different functions which can be called at any controller by injecting factory.

app.factory('factory', ['$http','$rootScope','$filter',function($http,$rootScope,$filter){

 factory.customSubmitCall = function ($scope){
    if($rootScope.page ==1){ //check on which page you are performing action
         $scope.pageOneSubmit(); //page specific function in that controller..
    }else{
          $scope.submit();
    }
};
    return factory;
}]);

In your HTML

<confirm name="Confirm" disable="disable"> </confirm>