Thursday 17 December 2015

angular modal dialog directive


Angular Modal Dialog





ngDialog is the angular directive used for displaying the modal windows in the angular application.



Features
  • With this directive we can create the custom dialog box easily. We can create the dialog with 
    1. Bootstrap theme
    2. Standard theme which is available with directive. The CSS classes can be customized as per your need
    3. and the custom user defined templates
  • We can  put as many buttons as we need on the dialog to take the necessary actions on the button clicks.
    1. These button functions should be defined in the controller that you have assigned to the view. 
    2. e.g if we want to show the two button on the dialog say "Ok" and "Cancel" then we can write the markup as  button="Ok|okFunction,Cancel|cancelFunction 
      • Here the Ok => will create the button with Label "Ok" on the click event of this "Ok button" the okFunction defined in the controller will be called. Similarly another button "Cancel" will be shown on the dialog which is bound to the scope function cancelFunction
Attribute configuration in the directive markup
  1. dialogid : HTML Id of the dialog created
  2. header   : Header text that should appear on the modal dialog
  3. Message : Message text of the modal dialog
  4. button    : buttons those should appear in the modal dialog,  The number of buttons should be ", (comma)" seperated. For each button the function that should get invoked should be contacted with the "| (Pipe)" Operator
    1. e.g  button="OkButton|okFunction,CancelButton|cancelFunction"
Here is the markup 

Bootstrap Theme

you need to included the following JS in your code












     


Standard Theme









     


Custom Theme


     

HTML code





1. 
    
     
     


2.  
     
     



3. 

          
     







Directive Code
(function(){
 'use strict';
 angular.module('ngDialog',[]);
})();
(function(){
 'use strict';
 angular.module('ngDialog').directive('ngDialog',
  directiveFunc);
 directiveFunc.$inject = [ '$templateCache','$filter'];
 
 function directiveFunc($templateCache,$filter) {
  var dialogBoxConfig = {
   theme: 'bootstrap',
  };
  return {
   restrict : 'AE',
   transclude: true,
   scope : {
    id :"@dialogid",
    header:"@header",
    message:"@message",
    button: "@button",
    theme : "@theme"
   },
   link : function(scope,element,attr) { 
    var buttonAttributeText = attr.button;
    if(buttonAttributeText!= undefined && buttonAttributeText!=''){ 
     var buttonList = null;
     var buttonListJSON = [];
     if(buttonAttributeText.indexOf(",") > 0) {
      buttonList = buttonAttributeText.split(",")
     }else {
      buttonList = createArrayFromObject(buttonAttributeText);
     }
     angular.forEach(buttonList,function(buttonDetails,index){
      var buttonAttributes = null;
      if(buttonDetails.indexOf("|") > 0 ){
       buttonAttributes = buttonDetails.split("|");
      }else {
       //debugger;
       buttonAttributes = createArrayFromObject(buttonDetails.trim()); 
      }      
      buttonListJSON.push({'buttonLabel':buttonAttributes[0],'buttonClickEventFunction':buttonAttributes[1]});
      scope.buttonListJSON = buttonListJSON;
     });
    }else {
     throw "No buttons provided. e.g  ";     
    }
    var messageAttributeText = attr.message;
    if(messageAttributeText!=undefined && messageAttributeText!=''){ 
     var messageList = null;
     var messageListJSON = [];
     if(messageAttributeText.indexOf(",") > 0) {
      messageList = messageAttributeText.split(",")
     }else {
      messageList = createArrayFromObject(messageAttributeText);
     }
     angular.forEach(messageList,function(buttonDetails,index){
      
      var messageAttributes = createArrayFromObject(buttonDetails.trim()); 
      messageListJSON.push({'messageLabel':messageAttributes[0]});
      scope.messageListJSON = messageListJSON;
     });
    }else {
     throw "No dialog message body provided. e.g  ";
    }
   },
   //templateUrl : config.modalsDir+'ngDialog.html',
   //templateUrl: 'tmpls/'+theme+'.html',
    templateUrl: function(tElement, tAttrs) {
     var _theme  = '';
     if(tAttrs.theme === undefined ){
      _theme = 'BOOTSTRAP';
     }else {
      _theme = $filter('uppercase')(tAttrs.theme);
     }      
       if (_theme === 'STANDARD') {  return 'tmpls/standard.html';}
       if (_theme === 'CUSTOM') {  return 'tmpls/'+tAttrs.theme+'.html';}
       if (_theme === 'BOOTSTRAP') {  return 'tmpls/bootstrap.html' };
   },
   controller : function($scope) {
    if($scope.theme === undefined){
     $scope.theme = 'bootstrap';
    }
    $scope.hasValue = function(val){
     var value = $scope.$parent[val.trim()];
     return (value !== null && angular.isDefined(value) && value !== '');
    }
    $scope.myclose = function(arg){
     $("#" + $scope.id).css({
      display : "none"
     });
     if(angular.isDefined(arg) && $scope.hasValue(arg)){
      var funcCall = "$scope.$parent."+arg+"()"; 
      $()
      var retValue = eval(funcCall);
     }
    }
   },
  };
 }
})();

angular.module('ngDialog')
 .run(['$templateCache',function($templateCache){
  $templateCache.put('tmpls/standard.html',
   '
' +'
' + '
' + '

{{ header}}

' + '
' + '
{{messageAttributes.messageLabel}}
' + '
' + '
' + '' + '
' + '
' + '
' + '
'); $templateCache.put('tmpls/bootstrap.html', ' '); }]); function createArrayFromObject(object) { var result = []; if (angular.isArray(object)) { //it is array result = object; }else if (object) { result.push(object); } return result; }
CSS :
.ng-dlg-bg > div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.ng-dlg {
    text-align: left;
    background: #eaeced;
    width: 350px;
    box-shadow: 0 7px 15px #80898f;
    border-radius: 2px;
    margin: 0 auto;
    display: table;
    position: relative;
}
.ng-dlg > h3 {
    font-weight: normal;
    padding: 15px 20px 10px 20px;
    border-radius: 2px 2px 0 0;
    background: #fff;
    border-bottom: 1px solid #dadcdd;
    font-size: 18px;
    color: #676a6f;
    margin: 0;
}
.ng-dlg > p {
    text-align: right;
    padding: 15px 20px;
    margin: 0;
}
.ng-dlg > p > button {
    width: auto;
    padding: 5px 25px;
    min-width: 80px;
    margin: 0 0 0 5px;
}
.ng-dlg > div {
    margin: 15px 20px 0 20px;
}
.ng-dlg > div > p {
    margin: 7px 0 0 0;
    padding: 0;
}

.ng-dlg-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 500;
}
.ng-glass {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #73808c;
    z-index: 499;
    display: none;
}

Licence : MIT

No comments:

Post a Comment