CODEWITHSUNDEEP
angularjsangular-directivesweetalert
Burak
Burak

Reputation: 5774

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;
                            }
                        });
                });
            }
        }
    };
}
]);

Upvotes: 0

Views: 781

Answers (1)

Deblaton Jean-Philippe
Deblaton Jean-Philippe

Reputation: 11397

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>

Upvotes: 1

Related Questions