show hide div

by John Wick

HTML

<!-- edited by mando -->
<body ng-app="myApp" ng-controller="hideContainer" hide-login="hideLoginContainer()">
    <a href="javascript:void(0)" ng-click="openLogin()" >Login</a>
    <div hide-login="hideLoginContainer()" class="loginBox" ng-show="userLogin" style="display:none;" >
        User Login
    </div>
</body>

CSS

body{position:relative;}
.loginBox{z-index:10; background:#cccccc; width:300px; height:260px; padding:10px; position:absolute;}

JavaScript

var myApplication = angular.module('myApp', []);
myApplication.directive('hideLogin', function($document){
  		return {
    		restrict: 'A',
    		link: function(scope, elem, attr) {
      			elem.bind('click', function(e) {
                    console.log('elem');
        			e.stopPropagation();
      			});
      			$document.bind('click', function() {
                    console.log('doc');
        			scope.$apply(attr.hideLogin);
      			})
    		}
  		}
	});

 myApplication.controller('hideContainer',function ($scope){
    $scope.openLogin = function(){
        $scope.userLogin = true;
  	};
     $scope.hideLoginContainer = function(){
        $scope.userLogin = false;
  	};
 });