JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="directiveApp" ng-controller="MainController">
    <button ng-click="doStuff()" unsaved-warning-trigger>
        {{buttonText}}
    </button>
</div>

JavaScript

var app = angular.module("directiveApp", []);

    app.directive('unsavedWarningTrigger',
         function() {
            return {
                priority: 1,
                terminal: true,
               link: function (scope, element, attr) {                   
                   
                   element.text(scope.buttonText);
                   
                    var clickAction = attr.ngClick;
                    element.bind('click',function () {
                        if (window.confirm("Sure?")) {
                            scope.$eval(clickAction)
                        }
                    });
                }
            };
        }
    );

MainController = function($scope) {
    $scope.buttonText = 'bound button';
    
    $scope.doStuff = function () {
        alert("doing stuff");
    };
}