Search code examples
angularjsangular-directivesweetalert

Confirm directive in AngularJS doesn't work


I end up with this code:

MetronicApp.directive('confirmClick', ['SweetAlert',
function(SweetAlert) {
    return {
        priority: 100,
        restrict: 'A',
        scope: {
            confirmClick: '&'
        },
        link: {
            pre: function(scope, element, attr) {
                var msg = attr.ngConfirmClick || "Are you sure?";
                var clickAction = attr.confirmedClick;
                element.bind('click touchstart', function(event) {
                    SweetAlert.swal({
                            title: "Are you sure?",
                            text: "Your will not be able to recover this imaginary file!",
                            type: "warning",
                            showCancelButton: true,
                            confirmButtonColor: "#DD6B55",
                            confirmButtonText: "Yes, delete it!",
                            cancelButtonText: "No, cancel plx!",
                            closeOnConfirm: false,
                            closeOnCancel: true
                        },
                        function(isConfirm) {
                            if (isConfirm) {
                                scope.confirmClick();
                            }
                            else{
                                return false;
                            }
                        });
                });
            }
        }
    };
}
]);

Solution

  • ng-click="delete(theme)" will always be triggered by your click

    The thing to do is to pass your function to your directive :

    MetronicApp.directive('ngConfirmClick', ['SweetAlert',
    function(SweetAlert) {
    return {
        priority: 100,
        restrict: 'A',
        scope: {
            ngConfirmClick : '&'
        },
        link: {
            pre: function(scope, element, attr) {
                var msg = attr.ngConfirmClick || "Are you sure?";
                var clickAction = attr.confirmedClick;
                element.bind('click touchstart', function(event) {
    
                    SweetAlert.swal({
                            title: "Are you sure?",
                            text: "Your will not be able to recover this imaginary file!",
                            type: "warning",
                            showCancelButton: true,
                            confirmButtonColor: "#DD6B55",
                            confirmButtonText: "Yes, delete it!",
                            cancelButtonText: "No, cancel plx!",
                            closeOnConfirm: false,
                            closeOnCancel: false
                        },
                        function(isConfirm) {
                            if (isConfirm) {
                               ngConfirmClick();
                                SweetAlert.swal("Deleted!", "Your imaginary file has been deleted.", "success");
                            } else {
                                SweetAlert.swal("Cancelled", "Your imaginary file is safe :)", "error");
                            }
                        });
                });
            }
        }
    };
    

    }

    And use the directive that way :

    <a ng-confirm-click="delete(theme)" class="btn btn-danger btn-md ng-scope" >Delete</a>