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

user_4805558 0
Viewed 293

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?

angularjs javascript
1 Answers

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

user_24354730
Related