make div hide if clicked elsewhere AngularJs

Question

I have a question , how we can achieve this with angularjs.

## Html ##

<input ng-model="text" ng-change= "datashow(text)">   
<div ng-show="showit" ng-init="showit = false">
 //contains data i got from scope 
 {{ query }}
</div>

## JS: ##

 $scope.datashow=function(text){
 if(text.length > 0)
   $http.post('url' ,text).sucess(function(data){
   $scope.showit = true;
   $scope.query  = data; 

 });
 }else{
  $scope.showit = false;
  }
 }

So this is the data i get whenever my user search for it. If he clicked outside the div then how can i hide that showit class.

What would be the best practices to do it in Angular Way!!!

tymeJV · Accepted Answer · 2014-04-16 13:29:23Z

2

Here's a little directive I use for clicking outside a container:

.directive("clickToClose", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            $(document).on("mouseup touchstart", function (e) {
                var container = $(elem);

                if (!container.is(e.target) // if the target of the click isn't the container...
                && container.has(e.target).length === 0) // ... nor a descendant of the container
                {
                    //Toggle your class with either a flag or removeClass
                }
        });
    }
}]);

It does use jQuery, but can easily be subbed out. Hope it helps. (Simply add click-to-close as an attribute of your container, and clicking outside that container should run this directive.)

answered Apr 16, 2014 at 13:29

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

maaw Over a year ago

This works perfectly. I don't mind using jQuery. I kind of miss it's simplicity when using angular.

Collectives™ on Stack Overflow

make div hide if clicked elsewhere AngularJs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related