tomwaters/NGConfirmComplete.html

## NGConfirmComplete.html
<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <style>
      body {
        font-family: arial;
      }
      .mydialog-bg {
        background-color: rgba(100, 100, 100, 0.8);
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        text-align: center;
      }
      .mydialog-pop {
        position: relative;
        display: inline-block;
        top: 20%;
        background-color: #fff;
        border: solid 2px #dfdfdf;
        text-align: left;
      }
      .mydialog-pop > * {
        padding: 4px;
      }
      .mydialog-title {
        background-color: #9696FF;
        color: #fff;
      }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script>
      angular.module('myApp', [])
        .directive('myConfirm', function () {
			function link($scope) {
				$scope.visible = false;
				$scope.posClick = function() {
					$scope.visible = false;
					$scope.confirmPositive();
				};
			}
            return {
              template: '<div class="mydialog-bg" ng-show="visible"><div class="mydialog-pop"><div class="mydialog-title">{{confirmTitle}}</div><div>{{confirmContent}}</div><input type="button" ng-click="posClick()" value="OK" /><input type="button" ng-click="visible=false" value="Cancel" /></div></div>',
              link: link,
              scope: {
                confirmTitle: '@',
                confirmContent: '@',
				confirmPositive: '&',
                visible: '='
              }
            };
        })
        .controller('myCtl', function ($scope) {
          $scope.showConfirm = function() {
            $scope.confirmMessage = 'Are you sure you want to?';
            $scope.confirmVisible = true;
          };
		  $scope.doThing = function() {
			console.log('do something that requires confirmation');
		  };
        });
    </script>
  </head>

  <body ng-controller="myCtl">
    <input type="button" ng-click="showConfirm()" value="Show" />
    <div my-confirm visible="confirmVisible" confirm-content="{{confirmMessage}}" confirm-title="Confirm Dialog Demo" confirm-positive="doThing()"></div>
  </body>
</html>
	<!DOCTYPE html>
	<html ng-app="myApp">
	<head>
	<style>
	body {
	font-family: arial;
	}
	.mydialog-bg {
	background-color: rgba(100, 100, 100, 0.8);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	text-align: center;
	}
	.mydialog-pop {
	position: relative;
	display: inline-block;
	top: 20%;
	background-color: #fff;
	border: solid 2px #dfdfdf;
	text-align: left;
	}
	.mydialog-pop > * {
	padding: 4px;
	}
	.mydialog-title {
	background-color: #9696FF;
	color: #fff;
	}
	</style>

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
	<script>
	angular.module('myApp', [])
	.directive('myConfirm', function () {
	function link($scope) {
	$scope.visible = false;
	$scope.posClick = function() {
	$scope.visible = false;
	$scope.confirmPositive();
	};
	}
	return {
	template: '<div class="mydialog-bg" ng-show="visible"><div class="mydialog-pop"><div class="mydialog-title">{{confirmTitle}}</div><div>{{confirmContent}}</div><input type="button" ng-click="posClick()" value="OK" /><input type="button" ng-click="visible=false" value="Cancel" /></div></div>',
	link: link,
	scope: {
	confirmTitle: '@',
	confirmContent: '@',
	confirmPositive: '&',
	visible: '='
	}
	};
	})
	.controller('myCtl', function ($scope) {
	$scope.showConfirm = function() {
	$scope.confirmMessage = 'Are you sure you want to?';
	$scope.confirmVisible = true;
	};
	$scope.doThing = function() {
	console.log('do something that requires confirmation');
	};
	});
	</script>
	</head>

	<body ng-controller="myCtl">
	<input type="button" ng-click="showConfirm()" value="Show" />
	<div my-confirm visible="confirmVisible" confirm-content="{{confirmMessage}}" confirm-title="Confirm Dialog Demo" confirm-positive="doThing()"></div>
	</body>
	</html>