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 类。

以Angular Way方式做到这一点的最佳做法是什么！

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作为容器的属性，并在该容器外部单击应运行此指令。）

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

1 个答案: