如果在其他地方點擊，使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作爲您容器的屬性添加，並在該容器外面單擊即可運行此指令。）