angular中点击页面任意地方让显示的元素消失

最新推荐文章于 2023-03-16 17:49:04 发布

转载最新推荐文章于 2023-03-16 17:49:04 发布 · 811 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gfrs/p/9599030.html

文章标签：

#javascript #ViewUI

本文介绍如何利用AngularJS的ng-show指令结合事件监听实现页面元素的动态显示与隐藏。通过定义变量show并利用jQuery的on事件，当点击页面上非特定元素时，触发元素的隐藏操作，同时注意事件冒泡的处理。

页面上用指令ng-show来控制元素显示隐藏

定义一个变量show

 $(document).on("click",function(e){
    var divTop = $('.bodyPop'); // 要隐藏的父标签
     if(!divTop.is(e.target) && divTop.has(e.target).length === 0){
         $scope.show = false; //控制隐藏元素的变量
         $scope.$apply();//数据更新
     }
});
注：如果点击消失的元素是依靠点击某个元素才显示的，要注意阻止事件冒泡

转载于:https://www.cnblogs.com/gfrs/p/9599030.html