JSFiddle - React, Tailwind, and code Playground

by Michele Marcucci

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.js"></script>
<div ng-app="app">
    <input type='button' class='btn btn-xs btn-red' value='Delete' role="role.id" ng-confirm-click="Are you sure to delete this user role ?">
</div>

JavaScript

var app = angular.module("app", []);
app.directive('ngConfirmClick', [
function () {
    return {
        controller: function ($scope, $http) {
            $scope.deleteRoleData = function (rid) {
                id = rid;
                var userdata = {
                    'userid': id
                };
                $http({
                    method: 'POST',
                    url: "php/userrole/deleteRoleData.php",
                    data: userdata,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }).then(function successCallback(response) {
                    //console.log('delete',response);
                    alert(response.data);
                }, function errorCallback(response) {
                    alert(response.data);
                });
            }
        },
        link: function (scope, element, attr) {
            var msg = attr.ngConfirmClick || "Are you sure?";
            var role = attr.role;
            attr.ngClick = "";
            element.bind('click', function (event) {
                if (window.confirm(msg)) {
                    scope.deleteRoleData(role);
                } else {
                    console.log('hello');
                }
            });
        }
    };
}]);