CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-ng-repeat
Anil Sharma
Anil Sharma

Reputation: 2962

make div hide if clicked elsewhere AngularJs

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!!!

Upvotes: 1

Views: 1265

Answers (1)

tymeJV
tymeJV

Reputation: 104775

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.)

Upvotes: 2

Related Questions