CODEWITHSUNDEEP
javascriptangularjs
pep8
pep8

Reputation: 401

Trying to display pop-up in angular before making REST call through JS

I'm facing an issue.

I've a button in angular like this :

<button ng-click = "makeRestCall()">
</button>

This is what the Javascript code looks like :

$scope.makeRestCall = function() {
    console.log('Logic to make rest call...');        
};

Now the issue is when I click the button, instead of it directly making the REST call through JS, I want it to display a pop-up for confirmation. If yes, then the function is called, else no.

Can someone help?

Upvotes: 2

Views: 643

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

You can create use simple confirm box of browser (to make it more intuitive in future you can use alertify plugin that will make popup UI consistent across browser )

$scope.makeRestCall = function() {
  var accepted = confirm('Are you sure you want to proceed.')
  if(accepted)
  console.log('Logic to make rest call...');
};

Demo Here

Demo with Alertify

Further extending this, it would be bad solution if you keep on repeating same amount of code on every place. This way would violet the DRY principle of ACID. Better we write logic once and use it everywhere. In angular you can create a directive for the same.

Directive

.directive('confirmAndSubmit', function() {
    return {
      link: function(scope, element, attrs) {
        element.on('click', function() {
          alertify.confirm('Are you sure you want to proceed.', function() {
            scope.$eval(attrs.submitCallback);
          })
        })
      }
    };
});

Usage

<button confirm-and-submit submit-callback="makeRestCall()">
    Make Rest Call
</button>

Controller

$scope.makeRestCall = function() {
    console.log('Logic to make rest call...')
};

Running demo with Directive

Upvotes: 4

Related Questions