博客

一般界面上都会有工具,点击就会弹出一下界面显示对应的选项,现在想实现,弹出的界面,点击外面的区域,隐藏掉该界面,主要采用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