깨끗한 지시적 접근.

업데이트 : Old Answer (2014)

기본적으로 ng-click이벤트를 가로 채고 ng-confirm-click="message"지시문에 포함 된 메시지를 표시 하고 사용자에게 확인을 요청합니다. 확인을 클릭하면 정상이 ng-click실행되고 그렇지 않으면 스크립트가 종료되고 ng-click실행되지 않습니다.

<!-- index.html -->
<button ng-click="publish()" ng-confirm-click="You are about to overwrite your PUBLISHED content!! Are you SURE you want to publish?">
  Publish
</button>

// /app/directives/ng-confirm-click.js
Directives.directive('ngConfirmClick', [
  function(){
    return {
      priority: -1,
      restrict: 'A',
      link: function(scope, element, attrs){
        element.bind('click', function(e){
          var message = attrs.ngConfirmClick;
          // confirm() requires jQuery
          if(message && !confirm(message)){
            e.stopImmediatePropagation();
            e.preventDefault();
          }
        });
      }
    }
  }
]);

Zach Snow의 코드 크레딧 : http://zachsnow.com/#!/blog/2013/confirming-ng-click/

업데이트 : 새로운 답변 (2016)

1) 접두어가 ‘ng’에서 ‘mw’로 변경되었습니다. 전자 ( ‘ng’)는 기본 각도 지시문 용으로 예약되어 있습니다.

2) ng-click 이벤트를 가로채는 대신 함수와 메시지를 전달하도록 지시문을 수정했습니다.

3) 기본 “확실합니까?”추가 mw-confirm-click-message = “”에 사용자 정의 메시지가 제공되지 않은 경우 메시지.

<!-- index.html -->
<button mw-confirm-click="publish()" mw-confirm-click-message="You are about to overwrite your PUBLISHED content!! Are you SURE you want to publish?">
  Publish
</button>

// /app/directives/mw-confirm-click.js
"use strict";

var module = angular.module( "myApp" );
module.directive( "mwConfirmClick", [
  function( ) {
    return {
      priority: -1,
      restrict: 'A',
      scope: { confirmFunction: "&mwConfirmClick" },
      link: function( scope, element, attrs ){
        element.bind( 'click', function( e ){
          // message defaults to "Are you sure?"
          var message = attrs.mwConfirmClickMessage ? attrs.mwConfirmClickMessage : "Are you sure?";
          // confirm() requires jQuery
          if( confirm( message ) ) {
            scope.confirmFunction();
          }
        });
      }
    }
  }
]);