Ng-confirm

by militellovincenzo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.angularjs.org/1.6.8/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div ng-app="app">

  <div ng-controller="mainController as $ctrl" >
    <div>{{ $ctrl.text}}</div>
    <div>
       <button ng-click="$ctrl.enable=!$ctrl.enable">Enable: {{$ctrl.enable}}</button>
      <button ng-click="$ctrl.onClick()" bcmea-confirm="Better for you to get lost!" data-enable-confirm="$ctrl.enable">Click me</button>
    </div>
  </div>

</div>

JavaScript

angular.module('bcmea-helper.confirm', ['ui.bootstrap', 'ui.bootstrap.modal'])
  .directive('bcmeaConfirm', bcmeaConfirm);

bcmeaConfirm.$inject = [];

function bcmeaConfirm() {
  // Usage:
  //
  // Creates:
  //
  var directive = {
    bindToController: true,
    scope: {
      enableConfirm: '=' 
    }, 
    controller: ConfirmController,
    controllerAs: 'vm',
    priority: -1,
    restrict: 'A',
    
  };
  return directive;

}

ConfirmController.$inject = ['$element', '$window', '$uibModal', '$timeout'];

function ConfirmController($element, $window, $uibModal, $timeout) {
    
  var flag = false;
  
  $element.on('click', function(e) {
  alert(this.enableConfirm);
  var bcmeaConfirmEnable =(this.enableConfirm || 'false')
  						    .toString()
                  .trim()
                  .toUpperCase();
             alert(bcmeaConfirmEnable);      
  var isEnabled = bcmeaConfirmEnable=="TRUE";
    
    if (isEnabled===false || flag == true) return;
    
    e.stopImmediatePropagation();
    e.preventDefault();

    var modal = $uibModal.open({
      template: `<div class="modal-header">
      						<h3 class="modal-title">Are you sure?</h3>
                 </div>
        				 <div class="modal-body">{{mCtrl.message}}</div>
      					 <div class="modal-footer">
                	 <button class="btn btn-primary" type="button" ng-click="mCtrl.ok()">OK</button>
                   <button class="btn btn-warning" type="button" ng-click="mCtrl.cancel()">Cancel</button>
        			  </div>`,
      controllerAs: 'mCtrl',
      controller: ['$uibModalInstance', function($uibModalInstance) {
        var $ctrl = this;
        $ctrl.message = $element.attr("bcmea-confirm") || 'Are you sure?';
        $ctrl.ok = function() {
          $uibModalInstance.close('ok');
        };

        $ctrl.cancel = function() {
          $uibModalInstance.dismiss('cancel');
        };
      }],
      size: 'sm',
      windowClass: 'confirm-window'
    });

   ...