top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

How to create a confirmation dialogue box in angular js?

+3 votes
405 views
How to create a confirmation dialogue box in angular js?
posted May 21, 2015 by Muskan

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes

Prepare your HTML

First, start off with a blank HTML page.

Create a link that you would like to run a function() on when clicked and confirmed.

It should look something like this:

 <a href="#" ng-click="shoutOut()">Shout!</a>

Lets add a couple of custom attributes that describes what we want to do with it.

<a href="#" ng-click="shoutOut()" confirmation-needed="Do you really want to
shout?">Shout!</a>

We've added confirmation-needed to define a custom message to be displayed when we want the user to confirm the results.

Function

With your HTML already looking like how it should look like, lets create the function

assuming your code lives in a Angular Controller

app.controller('wooCtrl', function($scope){
  $scope.shout = function() {
    alert('YO MR WHITE!');
  };    
});

Directive

Now, lets tell Angular how to handle the custom attribute 'confirmation-needed' by writing a custom directive. If you are a little lost at this stage, maybe this introduction to directives video could help..

app.directive('confirmationNeeded', function () {
    return {
    priority: 1,
    link: function (scope, element, attr) {
      var msg = attr.confirmationNeeded || "Are you sure?";
      var clickAction = attr.ngClick;
      element.bind('click',function (e) {
        scope.$eval(clickAction) if window.confirm(msg)
        e.stopImmediatePropagation();
        e.preventDefault();
       });
     }
    };
});
answer May 21, 2015 by Shivaranjini
Similar Questions
+1 vote

I have a group of array in $scope.firstorder. For example:

enter image description here

Based on some condition like array contains an element Quantity. If Qunatity is zero i need to remove this array from the list of arrays.

How can I do that?

 for (index in $scope.firstorder)
    {
        var quantity = $scope.firstorder[index][0].Quantity;
        if (quantity == 0)
        {
            Remove the array element from $scope.firstOrder;
        } 


    }
...