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