但是在弹出popup对话框时，会有一层背景幕,如下图：

我们可以点击弹窗的“cancel”或者“ok”等按钮确定，然后会关闭整个弹出框，但有时我们希望的是另一种体验，我们直接触摸一下就可以将弹出框关闭了，比如说，弹出框是分享的列表，包括qq,微信，微博等，这个场景下，弹出框肯定不会再设置“cancel”或者“ok”这些按钮的了。

用户想分享一篇文章，点击分享图标后，弹出分享列表，突然间用户又不想分享了，他现在要关闭这一个弹出的分享框，那么用户有两种做法，第一，点击手机的返回键，可以关闭弹出框，第二，用户希望轻轻触摸一下背景幕也就能够关闭弹出框。

现在就需要想办法解决这一个体验上的问题，而最好的是基于angular指令的模式来做，定义一个指令，可以在需要的页面上，运用该指令，进行监听是否触摸该背景幕。

在一个controller中：

.controller('articel',function($scope,$ionicPopup) {
	//	$scope.myPopup 记录弹出框是否弹出的状态，isPopup默认是false
	$scope.myPopup = {
      'isPopup':false
  	};

  	//点击分享按钮，弹出弹框，显示列表，
  	$scope.showShare = function() {

   	$scope.optionsPopup = $ionicPopup.show({
   		//这里简单列一下
   		template: '<div class="row">\
                <div class="col"><i class="ion-chatbubbles"></i><br/>微信</div>\
                <div class="col"><i class="ion-chatbubbles"></i><br/>微信</div>\
                <div class="col"><i class="ion-chatbubbles"></i><br/>微信</div>\
                <div class="col"><i class="ion-chatbubbles"></i><br/>微信</div>\
                <div class="col"><i class="ion-chatbubbles"></i><br/>微信</div>\
              </div>',
     	title: '分享文章',
    	scope: $scope,  
   	});

   	//弹出框弹出后，isPopup标志为true状态。
   	$scope.myPopup = {
      'isPopup':true
   };
})

那么我们需要定义一个指令closePopupBackDrop：

.directive('closePopupBackDrop', ['$ionicGesture',function($ionicGesture) {
        return {
            scope: false,//共享父scope
            restrict: 'A',
            replace: false,
            link: function(scope, element, attrs, controller) {
                //要在html上添加点击事件, 试了很久- -!
                var  $htmlEl= angular.element(document.querySelector('html'));
                $ionicGesture.on("touch", function(event) {
                    if (event.target.nodeName === "HTML" && scope.myPopup.isPopup) {
                        scope.optionsPopup.close();
                        scope.myPopup.isPopup = false;
                    }
                },$htmlEl);
            }
        };
}])

比如：

<div class="buttons" close-pup-back-drop>
<button class="button button-icon icon ion-android-share-alt"></button>

</div>