clickOff

http://angularjs.org/

by abeluga

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div class="restofpage" 
    ng-controller="MyCtrl">
    <div class="button" 
        ng-click="show=true;"
        click-off="show=false;">
        Click Me
    </div>
    <div ng-show="show" ng-init="show = false">
        <div>You can see me now!</div>
    </div>
</div>

CSS

.button {
    border: 1px solid gray;
    background-color: white;
}

.restofpage {
    height: 500px;
    background-color: #77AAFF;
    padding: 30px;
}

JavaScript

var myApp = angular.module('myApp',[]);

myApp.directive('clickOff', function($parse, $document) {
    var dir = {
        compile: function($element, attr) {
          // Parse the expression to be executed
          // whenever someone clicks _off_ this element.
          var fn = $parse(attr["clickOff"]);
          return function(scope, element, attr) {
            // add a click handler to the element that
            // stops the event propagation.
            element.bind("click", function(event) {
              console.log("stopProp");
              event.stopPropagation();
            });
            angular.element($document[0].body).bind("click",                                                                 function(event) {
                console.log("cancel.");
                scope.$apply(function() {
                    fn(scope, {$event:event});
                });
            });
          };
        }
      };
    return dir;
});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.log = function(s) { console.log(s); }
}