AngularJS1.4でクリック時に確認ダイアログを表示する方法

JavaScript

2017.05.12

既存システムでAngularJS1.4を使っている。Angular2以降が完全に別物になってしまったので、移行する工数をかける訳にもいかず（と言うかしたくない）使い続けている。

久々に弄る事になったが、JSだと楽勝なconfirm()がAngularJSだとディレクティブ作ってと面倒だったので備忘録として残しておく。

appModule.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 : "実行しても良いですか?";
                    // confirm() requires jQuery
                    if( confirm( message ) ) {
                        scope.confirmFunction();
                    }
                });
            }
        }
    }
]);

使う時は以下のように使う。例えば何かをキャンセルする時。

<div mw-confirm-click="ctrl.cancel(id)" mw-confirm-click-message='本当にキャンセルして良いですか?'>

まぁ、パクリ元はココなんだけどね