Confirm dialog box in angularjs

Question

How can I apply confirm dialog box in below button in angularjs ?

<button class="btn btn-sm btn-danger" ng-click="removeUser($index)">Delete</button>

Just like this.

<span><a class="button" onclick="return confirm('Are you sure to delete this record ?')" href="delete/{{ item.id }}">Delete</span>

Update

Currently I am doing it like this

    function removeUser(index) {
      var isConfirmed = confirm("Are you sure to delete this record ?");
      if(isConfirmed){
        vm.users.splice(index, 1);
      }else{
        return false;
      }
    };

Mohideen bin Mohammed · Accepted Answer · 2016-02-19 09:27:59Z

23

Here is the snippets,

how your HTML should be,

<button class="btn btn-sm btn-danger" ng-confirm-click="Are you sure to delete this record ?" confirmed-click="removeUser($index)">Delete</button>

Please Include this directive in your custom angularjs file,

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

Your angular scope based on your delete function mentioned above,

$scope.removeUser = function(index) {
    vm.users.splice(index, 1);
}

answered Feb 19, 2016 at 9:27

Mohideen bin Mohammed

20.4k11 gold badges121 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

A K Over a year ago

bind was deprecated. use on instead.

ahmetugurbulut · Accepted Answer · 2016-02-19 09:12:05Z

10

$scope.removeUser= function (ind){
 if (confirm("Are you sure?")) {
    alert("deleted"+ s);
    $window.location.href = 'delete/'+ s;
 }
}

http://jsfiddle.net/ms403Ly8/61/

answered Feb 19, 2016 at 9:12

ahmetugurbulut

1,60911 silver badges25 bronze badges

1 Comment

DKR Over a year ago

Perfect answer!!

Jax · Accepted Answer · 2016-02-19 09:31:00Z

I would separate the message bit from the delete action bit, that way you could reuse the confirm bit in other parts of your app: I use a directive like so:

angular.module('myModule').directive("ngConfirmClick", [
  function() {
   return {
     priority: -1,
      restrict: "A",
      link: function(scope, element, attrs) {
        element.bind("click", function(e) {
          var message;
          message = attrs.ngConfirmClick;
          if (message && !confirm(message)) {
           e.stopImmediatePropagation();
           e.preventDefault();
          }
        });
      }
    };
  }
]);

then have your controller function with the delete action:

$scope.removeUser(index) {
  //do stuff
}

and in the View I would use ng-click:

<span><a class="button" ng-confirm-click="Are you sure?" ng-click="removeUser(item.id}}">Delete</span>

hope it helps.

Gracia · Accepted Answer · 2016-02-19 09:13:45Z

You can try this plunker: http://plnkr.co/edit/xJJFxjYeeHmDixAYPu4c?p=preview You can create a directive for the dialog.

var app = angular.module('plunker', []);

 app.controller('MainCtrl', function($scope, $window) {

   $scope.delete = function(id) {
     $window.location.href = 'delete/'+ id;
   }
 });

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

Collectives™ on Stack Overflow

Confirm dialog box in angularjs

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related