angularjs 點擊div外面，隱藏該div

一般界面上都會有工具,點擊就會彈出一下界面顯示對應的選項,現在想實現,彈出的界面,點擊外面的區域,隱藏掉該界面,主要採用ng-show屬性和事件冒泡阻止的知識,如下過程:

1.界面上的布局文件:

2. <li ng-show="userAuthsMap[125]" class="deflist but_col03" id="reportDiv">
3. <a ng-click="wagetools($event)" href="javascript:;" title="報表">工具</a>
4. <div class="reportList" ng-show="reportlistshow" id="reportDiv_next" >
5. <!-- 增加這個是為了指定導出的excel的表名的,外國網站看到的,http://stackoverflow.com/questions/17126453/html-table-to-excel-javascript -->
6. <a id="dlink" stylex="display:none"></a>
7. <ul>
8. <li ng-click="paperInfor($event)">導出編號姓名</li>
9. <li ng-click="getMedical($event)">導出就診申請單</li>
10. <li ng-click="getCert($event)">師職醫療證</li>
11. <li ng-click="userInfo($event)">用戶信息報表</li>
12. <li ng-click="queryUserPicture()">照片</li>
13. </ul>
14. </div></li>

2.在controller裡面,寫js函數進行控制:

2. var myDiv = document.getElementById("reportDiv");
3. document.addEventListener("click",function(){
4. $scope.reportlistshow=false;//reportlistshow為控制div顯示的ng-show屬性
5. $scope.$apply();//這個一定要加,否則隱藏不了.
7. });
8. myDiv.addEventListener("click",function(event){
9. $scope.reportlistshow=!$scope.reportlistshow;//對ng-show屬性取反
11. event=event||window.event;
12. event.stopPropagation();//阻止事件冒泡,防止隱藏
13. });

運行截圖:

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！