Is there any way to combine angular js confirm and sweet alert(swal)

Question

In my current project, for logout I want to add confirmation. For the confirmation I want sweet alert. I found solution for confirmation and sweet alert separately but I am finding it difficult to combine those two. HTML:

<a href="javascript:void(0);" ng-click="Logout()"><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>

js:

app.controller('LogoutCtrl', ['$scope', '$location', 'localStorageService', function($scope, $location, localStorageService) {
    $scope.Logout = function() {
        swal({
                title: "Are you sure to logout?",
                text: "",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: '#DD6B55',
                confirmButtonText: 'Yes',
                cancelButtonText: "No",
                closeOnConfirm: false,
                closeOnCancel: false
            },
            function(isConfirm) {
                if (isConfirm) {
                    localStorageService.clearAll();
        $location.path('/login');

                }
            });
    }
}]);

I know there can't be function inside another function but I can't find other way round. Instead of angular confirm I want to use sweet alert. Is it possible. Thanks in advance.

Code in action

this is what you need https://github.com/oitozero/ngSweetAlert — Vanojx1, Aug 23 '16 at 06:45
@Vanojx1 .. Yes, I have it. My problem is I am not able to bind that sweetalert with logout confimation. When user clicks logout I want sweetalert confirmation to popup and only on confirmation logout occurs. — samjhana joshi, Aug 23 '16 at 06:49

jayanthCoder · Answer 1 · 2016-08-23T06:57:28.680

0

there can be a function inside another function in javascript

function(){
       function abc(){
       }


       //use abc() as much as you want               
}

edited Aug 23 '16 at 06:57

answered Aug 23 '16 at 06:51

jayanthCoder

615
1
6
13

I am not abkle to understand your problem statement ... can you pls be more specific – jayanthCoder Aug 23 '16 at 06:52
Yes I know there can't be another function inside a funciton. I am searching a workaround for it. – samjhana joshi Aug 23 '16 at 06:56
I am using the same. Problem is I can't get angular and swal alert to work on confirmation. When user clicks on logout I want swal alert as confirmation box. Only is user confirms then user be logged out. The problem with my work is there can't be function inside a function. – samjhana joshi Aug 23 '16 at 07:00

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

You have special case, where you are making changes in location path without letting angular know that something got change, eventually digest cycle isn't getting fire. You should fire digest cycle manually for making location changes to understand by angular router. For running digest cycle you could use $timeout(inject inside controller before using it)

var ctrl = function($scope, $location,$timeout) {

  swal({
      title: "Are you sure to logout?",
      text: "",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: '#DD6B55',
      confirmButtonText: 'Yes',
      cancelButtonText: "No",
      closeOnConfirm: true, //it should be true to close popup on confirm
      closeOnCancel: true  //it should be true to close popup on cancel
    },
    function(isConfirm) {
      if (isConfirm) {
        $timeout(function(){
          localStorageService.clearAll();
          $location.path('/login');          
        });
      }
    });
}

Code In Action

You could look at this answer as well, to implement swal alert in angular, which will internally handle digest cycle thing internally.

edited May 23 '17 at 10:33

Community

1
1

answered Aug 23 '16 at 07:00

Pankaj Parkar

134,766
23
234
299

...there is function inside function. Will it work ? – samjhana joshi Aug 23 '16 at 07:03
@samjhanajoshi The function that are there in swal` are callback function, passed to `swal` plugin, 1st is success callback(called on "Ok"), 2nd would cancel callback, it should work – Pankaj Parkar Aug 23 '16 at 07:05
ok I get you now .. but it's not working. Even I click Yes or No it doesn't enter isConfirm function. – samjhana joshi Aug 23 '16 at 07:08
@samjhanajoshi look at updated answer, it would be more helpful that I had added plunkr which is doing to same thing which you want – Pankaj Parkar Aug 23 '16 at 07:49
Can you look into my plunker .. It's not going into the funciton of IsConfirm – samjhana joshi Aug 23 '16 at 09:54
@samjhanajoshi because you haven't set up any login route in your example.. check mine plunkr – Pankaj Parkar Aug 23 '16 at 09:56
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/121605/discussion-between-samjhana-joshi-and-pankaj-parkar). – samjhana joshi Aug 23 '16 at 09:59
@samjhanajoshi have you looked at it? does that helped you? – Pankaj Parkar Aug 24 '16 at 12:08
No, it's not working ... isConfirm function isn't working. – samjhana joshi Aug 25 '16 at 04:21
Why don't you compare you code with plunkr.. i think you must have missed something – Pankaj Parkar Aug 25 '16 at 04:30

Is there any way to combine angular js confirm and sweet alert(swal)

2 Answers2