這只是一個ionic1地區（省、市、區）選擇Demo，并不是一個插件，不涉及任何原生的東西。

地區選擇Demo.gif

Demo已開源，項目地址：https://github.com/hhjjj1010/ionic1-area-picker-demo

關于地區數據

1. 地區數據是保存在本地的area.json文件里面，使用$http.get("js/area.json")獲取數據到項目中。
2. 地區數據很少有發生變化，所以很適合存在本地，減少從服務器獲取數據的時間。
3. 當然，如果你一定要從服務器上去獲取，也不是不可以。如果數據格式與當前項目的格式不相同的話，那相應的service的處理也要變化。

關于界面顯示

1. 地區選擇的界面通過一個modal層來彈出來，主要是為了方便值傳遞。

2. 在ionic-modal-view里面使用ion-slide-box，設置ion-slide-box的高度為全屏時使用height=100%不起作用，只能用ng-style把屏幕的高度給它。

3. 一開始使用ion-veiw的方式來做的，選擇了地區之后使用廣播的方式回傳到上一個頁面。后來放棄了，因為出現了一個問題，沒能完全解決掉。

4. 第一個頁面需要有地區選擇的廣播監聽處理，從它進入的下一個頁面也有這個監聽處理。在第二個頁面上完成地區選擇之后，兩個頁面的監聽事件都會被觸發。

5. 目前$ionicModal只帶了一種從下方彈出的動畫。自定義$ionicModal的動畫，比如：從右邊往左彈出。

   /*================ 自定義$ionicModal動畫 ================*/
    .slide-in-right {
      -webkit-transform: translateX(-100%);
      transform: translateX(100%);
    }
   
    .slide-in-right.ng-enter, .slide-in-right > .ng-enter {
      -webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
      transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
    }
   
    .slide-in-right.ng-enter-active, .slide-in-right > .ng-enter-active {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
   
    .slide-in-right.ng-leave, .slide-in-right > .ng-leave {
      -webkit-transition: all ease-in-out 250ms;
      transition: all ease-in-out 250ms;
    }
   
    .slide-in-left {
      -webkit-transform: translateX(-100%);
      transform: translateX(100%);
    }
   
    .slide-in-left.ng-enter, .slide-in-left > .ng-enter {
      -webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
      transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
    }
   
    .slide-in-left.ng-enter-active, .slide-in-left > .ng-enter-active {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
   
    .slide-in-left.ng-leave, .slide-in-left > .ng-leave {
      -webkit-transition: all ease-in-out 250ms;
      transition: all ease-in-out 250ms;
    }
   
    /*================ 自定義$ionicModal動畫 ================*/
   

關于$ionicModal的再封裝

1. 選擇地區的界面是用一個modal層彈出來的，因為在實際項目中，可能很多地方都會用到，所以就把對modal層的初始化，show、hide以及remove封裝到一個service中。同時，這個service還包括選中省、市、區之后的操作。
2. 因為modal層的緩存的原因，所以在modal層關閉的時候是調用的remove方法，每次彈出的modal層都是重新初始化出來的。