angularjs confirmation dialog box

Hi, I am going to share the code-sample for confirmation dialog box on an ng-click using a custom AngularJs directive. The example code as given below.

Table of Contents

1. HTML 5 code-sample
2. AngularJs controller $scope function i.e. $scope.removeRowIndex
3. AngularJs custom directive code-sample.

 HTML 5 code-sample

?

1	<button confirmed-click="removeRowIndex(col, row)" ng-confirm-box-click="Are you sure want to delete?" class="btn btn-xs btn-default"></button>

<button confirmed-click="removeRowIndex(col, row)" ng-confirm-box-click="Are you sure want to delete?" class="btn btn-xs btn-default"></button>

AngularJs controller $scope function i.e. $scope.removeRowIndex

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19

var app = angular.module('mobileApp', ['ngGrid']); app.controller('getMobileServiceCtrl', function ($scope) {     $scope.mobiles = null;          $scope.removeRowIndex = function (col, row) {         var index = this.row.rowIndex;              $scope.mobileGridView.selectItem(index, false);         $scope.mobiles.splice(index, 1);         if (row.entity !== undefined && row.entity !== null) {             deleteUserFromServer(row.entity);         }     };     function deleteUserFromServer(row) {         var UID = row.UID;               }; });

var app = angular.module('mobileApp', ['ngGrid']);
app.controller('getMobileServiceCtrl', function ($scope) {
    $scope.mobiles = null;  
  
    $scope.removeRowIndex = function (col, row) {
        var index = this.row.rowIndex;      
        $scope.mobileGridView.selectItem(index, false);
        $scope.mobiles.splice(index, 1);

        if (row.entity !== undefined && row.entity !== null) {
            deleteUserFromServer(row.entity);
        }
    };

    function deleteUserFromServer(row) {
        var UID = row.UID;
        
    };
});

AngularJs custom directive code-sample.

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

app.directive('ngConfirmBoxClick', [       function () {           return {               link: function (scope, element, attr) {                   var msg = attr.ngConfirmBoxClick || "Are you sure want to delete?";                   var clickAction = attr.confirmedClick;                   element.bind('click', function (event) {                       if (window.confirm(msg)) {                           scope.$eval(clickAction)                       }                   });               }           };       } ]);

app.directive('ngConfirmBoxClick', [
      function () {
          return {
              link: function (scope, element, attr) {
                  var msg = attr.ngConfirmBoxClick || "Are you sure want to delete?";
                  var clickAction = attr.confirmedClick;
                  element.bind('click', function (event) {
                      if (window.confirm(msg)) {
                          scope.$eval(clickAction)
                      }
                  });
              }
          };
      }
]);

Full Example code-sample

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

//HTML 5 <button confirmed-click="removeRowIndex(col, row)" ng-confirm-box-click="Are you sure want to delete?" class="btn btn-xs btn-default"></button> //AngularJs var app = angular.module('mobileApp', ['ngGrid']); app.controller('getMobileServiceCtrl', function ($scope) {     $scope.mobiles = null;          $scope.removeRowIndex = function (col, row) {         var index = this.row.rowIndex;              $scope.mobileGridView.selectItem(index, false);         $scope.mobiles.splice(index, 1);         if (row.entity !== undefined && row.entity !== null) {             deleteUserFromServer(row.entity);         }     };     function deleteUserFromServer(row) {         var UID = row.UID;               }; }); app.directive('ngConfirmBoxClick', [       function () {           return {               link: function (scope, element, attr) {                   var msg = attr.ngConfirmBoxClick || "Are you sure want to delete?";                   var clickAction = attr.confirmedClick;                   element.bind('click', function (event) {                       if (window.confirm(msg)) {                           scope.$eval(clickAction)                       }                   });               }           };       } ]);

//HTML 5

<button confirmed-click="removeRowIndex(col, row)" ng-confirm-box-click="Are you sure want to delete?" class="btn btn-xs btn-default"></button>

//AngularJs

var app = angular.module('mobileApp', ['ngGrid']);
app.controller('getMobileServiceCtrl', function ($scope) {
    $scope.mobiles = null;  
  
    $scope.removeRowIndex = function (col, row) {
        var index = this.row.rowIndex;      
        $scope.mobileGridView.selectItem(index, false);
        $scope.mobiles.splice(index, 1);

        if (row.entity !== undefined && row.entity !== null) {
            deleteUserFromServer(row.entity);
        }
    };

    function deleteUserFromServer(row) {
        var UID = row.UID;
        
    };
});

app.directive('ngConfirmBoxClick', [
      function () {
          return {
              link: function (scope, element, attr) {
                  var msg = attr.ngConfirmBoxClick || "Are you sure want to delete?";
                  var clickAction = attr.confirmedClick;
                  element.bind('click', function (event) {
                      if (window.confirm(msg)) {
                          scope.$eval(clickAction)
                      }
                  });
              }
          };
      }
]);