Ionic中自定義popup寫法以及點擊backdrop隱藏popup的directive寫法

網上提供的popup例子使用的是template，使用title、subtitle等參數來設置樣式，但是這樣在很多時候並不能滿足我們的需求的（ionic自帶樣式本身就醜），所以這時候可以通過templateURL來寫出我們想要的樣式。

效果

原樣式：

自定義後的樣式（不敢說有多好看，但是至少還是有點進步的，這是之前在Windows下面截的圖，其實在手機中會好很多）：

實現

一．建立一個popup.html文件，裏面編寫自己想要的內容與效果，由於我這裏就一個標題和input框，所以代碼量較少。

<style>
.popup-title{
   padding-bottom: 10px;
}
</style>
<div>請填寫快速按鈕標題</div>
<input type="text" />

二．在JS中調用此popup文件，代碼爲：

$scope.myPopup = $ionicPopup.show({           
    templateUrl: 'templates/sale/modal/popup.html',
    scope: $scope,
    buttons: [{ //Array[Object] (可選)。放在彈窗footer內的按鈕。
        text: '取消',
        type: 'sale-cancel',
        onTap: function(e) { 
            $scope.myPopup.close();  
        } 
    }, {
        text: '確定',
         type: 'sale-sure',
               onTap: function(e) { 
            console.log(e)
        }
    }]
});

可以看到，button裏的內容也是可以自定義的，type對應的就是button的樣式class，所以這裏需要編寫一個css文件，我修改了一下popup的border-radius，這個是需要覆蓋源碼的，請知悉。代碼如下：

.popup-container .popup {
    border-radius: 8px;
}
.popup-buttons {
    padding: 0;
    min-height: auto;
}
.sale-cancel {
    border-bottom-left-radius: 8px!important;
    margin-right: 0!important;
}
.sale-sure {
    border-bottom-right-radius: 8px!important;
    background-color: #EABA82;
    color: white!important;
}

注：使用!important的目的是使其樣式優先級最高，並且在狀態爲active時不改變對應的樣式。

Directive

       在我個人的操作習慣來說，彈起這個彈窗的時候，如果我想取消本次彈窗，我是想點擊這個彈窗的外部就可以取消，而不是說非要點擊那個取消按鈕，並且現在有很多的大屏手機，一般單手操作的話是不容易點擊到取消的。

       但是在ionic的popup組件中是沒有這樣的效果的，所以我們需要自己去實現這個效果，這裏使用directive來實現。
   

一．在app.js中定義一個module來存儲這個directive，如下：

var saleDrective = 
angular.module('saleDrective', ['saleDrective.directives']);

二．建立js文件，加入以下代碼：

angular.module('saleDrective.directives', []) 
  .directive('rjCloseBackDrop', [function() {
    return {     
        scope: false,
             restrict: 'A',
             replace: false,
             link: function($scope, iElm, iAttrs, controller) {       
            var htmlEl = angular.element(document.querySelector('html'));       
            htmlEl.on("click", function(event) {         
                if (event.target.nodeName === "HTML" & $scope.myPopup) {
                    $scope.myPopup.close();
                }       
            });     
        }   
    }; 
}])

這裏的module名字需要與app.js定義的保持一致。Directive是直接操作dom的，判斷當前popup爲顯示狀態時（即下面的if語句，$scope.myPopup是在controller中定義popup名字，在上面代碼中有寫出來）點擊外圍backdrop即close當前popup。

三．在HTML中引入這個directive

在使用到這個popup對應的頁面中的content上加入rj-close-back-drop如：

四．在index中引入這個js文件

現在就大功告成了，希望對大家有幫助。