JSFiddle - React, Tailwind, and code Playground

by pertrai1

HTML

<div ng-app="directiveApp" ng-controller="MainController">
     <unsaved-warning-trigger>
</div>

JavaScript

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

app.controller('MainController', function ($scope) {
    $scope.content = {
        buttonText: 'bound button',
        ok: 'Sure?',
        cancel: 'Not sure',
        action: 'Sure'
    }

    $scope.doStuff = function () {
        var message = confirm($scope.content.ok);
        if (message == true) {
            alert($scope.content.action);
        } else {
            alert($scope.content.cancel);
        }
    }
    
    $scope.confirm = function() {
         confirm('Sure?');   
    }
 });

app.directive('unsavedWarningTrigger',

    function () {
        return {
            restrict: 'E',
            priority: 1,
            template: '<button ng-click="doStuff()"> {{content.buttonText}} </button>'
        };
    });