var app = angular.module('plunker', ['anyOtherClick']);
app.controller('MainCtrl', function($scope) {
var ctrl = {
popupVisible: false,
};
ctrl.showPopup = function() {
ctrl.popupVisible = true;
};
ctrl.hidePopup = function() {
ctrl.popupVisible = false;
};
return ctrl;
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.27/angular.js" data-semver="1.2.27"></script>
<script src="any-other-click.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<div>
<a ng-click="ctrl.showPopup(); $event.stopPropagation()">Click To Show Popup</a>
<div class="popup" ng-show="ctrl.popupVisible" any-other-click="ctrl.hidePopup()">
<strong>Popup Visible!</strong>
<br />
<br />
<div>Clicks inside the popup do not dismiss</div>
<br />
<a ng-click="ctrl.hidePopup()">Click here (or outside) to dismiss</a>
</div>
</div>
</body>
</html>
/* Put your css in here */
a:hover {
text-decoration: underline;
}
.popup {
display: inline-block;
position: absolute;
top:0.75em;
border: solid black 1px;
background: lightgray;
padding:4px;
}
(function () {
var module = angular.module('anyOtherClick', []);
var directiveName = "anyOtherClick";
module.directive(directiveName, ['$document', "$parse", function ($document, $parse) {
return {
restrict: 'A',
link: function (scope, element, attr, controller) {
var anyOtherClickFunction = $parse(attr[directiveName]);
var documentClickHandler = function (event) {
var eventOutsideTarget = (element[0] !== event.target) && (0 === element.find(event.target).length);
if (eventOutsideTarget) {
scope.$apply(function () {
anyOtherClickFunction(scope, {});
});
}
};
$document.on("click", documentClickHandler);
scope.$on("$destroy", function () {
$document.off("click", documentClickHandler);
});
},
};
}]);
})();