tomwaters/NGAlertComplete.html

## NGAlertComplete.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('myAlert', function () {
            return {
              template: '<div class="mydialog-bg" ng-show="visible"><div class="mydialog-pop"><div class="mydialog-title">{{alertTitle}}</div><div>{{alertContent}}</div><input type="button" ng-click="visible=false" value="OK" /></div></div>',
              link: function(scope) { scope.visible = false;},
              scope: {
                alertTitle: '@',
                alertContent: '@',
                visible: '='
              }
            };
        })
        .controller('myCtl', function ($scope) {
          $scope.showAlert = function() {
            $scope.alertMessage = 'This is my alert message!';
            $scope.alertVisible = true;
          }
        });
    </script>
  </head>

  <body ng-controller="myCtl">
    <input type="button" ng-click="showAlert()" value="Show" />
    <div my-alert visible="alertVisible" alert-content="{{alertMessage}}" alert-title="Alert Dialog Demo"></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('myAlert', function () {
	return {
	template: '<div class="mydialog-bg" ng-show="visible"><div class="mydialog-pop"><div class="mydialog-title">{{alertTitle}}</div><div>{{alertContent}}</div><input type="button" ng-click="visible=false" value="OK" /></div></div>',
	link: function(scope) { scope.visible = false;},
	scope: {
	alertTitle: '@',
	alertContent: '@',
	visible: '='
	}
	};
	})
	.controller('myCtl', function ($scope) {
	$scope.showAlert = function() {
	$scope.alertMessage = 'This is my alert message!';
	$scope.alertVisible = true;
	}
	});
	</script>
	</head>

	<body ng-controller="myCtl">
	<input type="button" ng-click="showAlert()" value="Show" />
	<div my-alert visible="alertVisible" alert-content="{{alertMessage}}" alert-title="Alert Dialog Demo"></div>
	</body>
	</html>