Попытка отобразить всплывающее окно в угловом формате перед выполнением вызова REST через JS

Question

У меня проблема.

У меня есть кнопка в угловом виде:

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

Вот как выглядит код Javascript:

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

Теперь проблема заключается в том, что, когда я нажимаю кнопку, вместо того, чтобы непосредственно сделать вызов REST через JS, я хочу, чтобы он отображал всплывающее окно для подтверждения. Если да, то функция вызывается, иначе нет.

Может кто-нибудь помочь?

Answer 1

Вы можете создать простой браузер confirm (чтобы сделать его более интуитивным в будущем, вы можете использовать плагин alertify, обеспечивающий согласованность всплывающего пользовательского интерфейса в браузере)

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

Демо здесь

Демо с оповещением

---

Дальнейшее расширение этого было бы плохим решением, если бы вы продолжали повторять одинаковое количество кода в каждом месте. Таким образом, фиолетовым будет принцип СУХОЙ КИСЛОТЫ. Лучше один раз написать логику и использовать ее везде. В угловых вы можете создать директиву для того же.

Директива

.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>

Контроллер

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

Демонстрация работы с Директивой