angularjs 点击div外面,隐藏该div

一般界面上都会有工具,点击就会弹出一下界面显示对应的选项,现在想实现,弹出的界面,点击外面的区域,隐藏掉该界面,主要采用ng-show属性和事件冒泡阻止的知识,如下过程:

1.界面上的布局文件:

<li ng-show="userAuthsMap[125]" class="deflist but_col03" id="reportDiv"><a ng-click="wagetools($event)" href="javascript:;" title="报表">工具</a><div class="reportList" ng-show="reportlistshow"  id="reportDiv_next" ><!-- 增加这个是为了指定导出的excel的表名的,外国网站看到的,http://stackoverflow.com/questions/17126453/html-table-to-excel-javascript --><a id="dlink" style="display:none"></a><ul><li ng-click="paperInfor($event)">导出编号姓名</li><li ng-click="getMedical($event)">导出就诊申请单</li><li ng-click="getCert($event)">师职医疗证</li><li ng-click="userInfo($event)">用户信息报表</li><li ng-click="queryUserPicture()">照片</li></ul></div></li>

2.在controller里面,写js函数进行控制:

var myDiv = document.getElementById("reportDiv");document.addEventListener("click",function(){$scope.reportlistshow=false;//reportlistshow为控制div显示的ng-show属性$scope.$apply();//这个一定要加,否则隐藏不了.});myDiv.addEventListener("click",function(event){$scope.reportlistshow=!$scope.reportlistshow;//对ng-show属性取反event=event||window.event;event.stopPropagation();//阻止事件冒泡,防止隐藏});

运行截图:

参考博客:https://www.cnblogs.com/shenyixin/p/5782742.html

angularjs 点击div外面,隐藏该div相关推荐

Vue js 实现点击页面空白处隐藏指定div
Vue js 实现点击页面空白处隐藏指定div <template><div class="page" @ ...
div html隐藏边框,div 边框原来有这么多种设置方法
在HTML前端开发中,有数次会对配置边框. 这里给DIV加一个边框方式教程,实现div边框花色.通过CSS border花式属性完成加边框. 下列是各类给DIV加差距边框实例和技能花样教程.htm ...
html中的div怎么隐藏显示出来,js实现元素div/ul li的显示与隐藏
在网页设计过程中,某些时候需要隐藏一些元素(div/ul li),某些时候又需要显示一些隐藏的元素.例如一打开网页显示一段网站公告,过一小段时间后把公告隐藏起来.对于这类元素显示隐藏的操作,应该如何实 ...
点击切换div 的隐藏与显示
点击切换div 的隐藏与显示适合做切换按钮 <!DOCTYPE html> <html><head><meta charset="utf-8&qu ...
HTML如何在按钮右侧显示div,如何实现点击页面中的一个按钮相应位置的div显示隐藏？...
这个可以通过给按钮点击事件传参来完成,下面是一个小例子 html 点击1 1 点击2 2 点击3 3 点击4 4 点击5 5 css .one{ width: 100px; height: 20px; ...
jquery点击非div区域隐藏div
点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框 html代码 <div class=&qu ...
java单击切换div_[Java教程]点击同一按钮实现div的隐藏与现实切换
[Java教程]点击同一按钮实现div的隐藏与现实切换 0 2016-01-16 21:00:12 点击同一按钮实现div的隐藏与现实切换: 在很多应用中,都有这样的功能,点击同一个按钮可以实现div ...
React 点击按钮显示div与隐藏div
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>R ...
jquery实现div的隐藏和显示和点击空白显示隐藏
$('#button')是要点击的按钮,$('#view')是要显示或隐藏的内容区域一.点击按钮显示隐藏 $(function () { $("#button").click(f ...

angularjs 点击div外面,隐藏该div

angularjs 点击div外面,隐藏该div相关推荐

最新文章

热门文章