如果在其他地方点击，使div隐藏AngularJs

Question

我有一个问题，我们如何用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; 
    } 
} 

所以这是我得到每当我的用户搜索的数据。如果他在div外点击，那我该如何隐藏showit class。

什么是最好的做法，在角度做！

Answer 1

这里有一个小的指令我用点击一个容器外：

.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 
       } 
     }); 
    } 
}]); 

它不使用jQuery，但很容易被涂胶了。希望能帮助到你。 （只需将click-to-close作为您容器的属性添加，并在该容器外面单击即可运行此指令。）