ionic 城市选择器

ionic中很火的ionic-citypicker让人很失望，实测在安卓中没有效果。经过排错发现，在安卓里面不支持on-scroll-complete事件。最终选择了放弃（怪我无能。。。）

后来，好心人给了个案例。就直接用了。现在把代码贴出来。

大概的思路还是通过自定义指令和调用模板完成的。。。

HTML

<hms-pct-select ng-transclude></hms-pct-select>

模板：

<script id="hmsPCTSelect-modal.html" type="text/ng-template">
  <ion-modal-view>
    <ion-header-bar class="bar-balanced">
      <div class="buttons" ng-show="showBackBtn">
        <button ng-click="goBackSlide()" class="button button-clear">
          返回
        </button>
      </div>
      <h1 class="title">选择地址</h1>
      <div class="buttons">
        <button ng-click="PCTModal.hide();" class="button button-clear">
          取消
        </button>
      </div>
    </ion-header-bar>
    <ion-content overflow-scroll="true" style="overflow: hidden">
      <ion-slide-box show-pager="false" style="height: 100%;" does-continue="false" delegate-handle="PCTSelectDelegate" ng-init="lockSlide()">
        <ion-slide >
          <ion-scroll style="height: 100%;" scrollbar-y="false" delegate-handle="PCTSelectProvince">
            <ion-item class="item-icon-right" ng-click="chooseProvince(item);" ng-repeat="item in provincesData">
              <span>{{item}}</span>
              <i class="icon ion-ios-arrow-right icon-item"></i>
            </ion-item>
          </ion-scroll>
        </ion-slide>
        <!--省选择结束-->

        <!--市选择开始-->
        <ion-slide>
          <ion-scroll style="height: 100%;" scrollbar-y="false" delegate-handle="PCTSelectCity">
            <ion-item class="item-icon-right" ng-click="chooseCity(item);" ng-repeat="item in citiesData">
              <span>{{item}}</span>
              <i class="icon ion-ios-arrow-right icon-item"></i>
            </ion-item>
          </ion-scroll>
        </ion-slide>
        <!--市选择结束-->

        <!--县选择开始-->
        <ion-slide>
          <ion-scroll style="height: 100%;" scrollbar-y="false" delegate-handle="PCTSelectTown">
            <ion-item class="item-icon-right" ng-click="chooseTown(item);" ng-repeat="item in townData">
              <span>{{item}}</span>
              <i class="icon ion-ios-arrow-right icon-item"></i>
            </ion-item>
          </ion-scroll>
        </ion-slide>
      </ion-slide-box>

    </ion-content>
  </ion-modal-view>

</script>

自定义指令：

.directive('hmsPctSelect', function () {
    var TAG = 'hmsPCTSelectDirective';
    return {
      restrict: 'EA',
      scope: {
        default: '=defaultdata'
      },
      replace: true,
      transclude: true,
      template: '<div class="col" style="font-size: 14px;" ng-click="toSetDefaultPosition();">' +
      '{{selectedAddress.province+selectedAddress.city+selectedAddress.town}}' +
      '</div>',
      controller: function ($scope, $element, $attrs, $ionicModal, $http, $ionicSlideBoxDelegate, $timeout, $rootScope, $ionicScrollDelegate) {
        var selectedAddress = {};
        var addressData;
        this.$onInit = function () {
          selectedAddress = {};
          $scope.selectedAddress = {};


          $http.get('http://runjs.cn/uploads/rs/41/r7zpvbql/Area_Datas_v2.json').success(function (res) {//调取城市选择器的接口获取城市数据
            addressData = res;
            $scope.provincesData = addressData['86'];
          }).error(function (err) {
            console.log('area_datas err = ' + angular.toJson(err));
          });

          $ionicModal.fromTemplateUrl('hmsPCTSelect-modal.html', {
            scope: $scope,
            animation: 'slide-in-up'
          }).then(function (modal) {
            $scope.PCTModal = modal;
          })
        };

        $scope.lockSlide = function () {
          $ionicSlideBoxDelegate.$getByHandle('PCTSelectDelegate').enableSlide(false);
        };

        $scope.$watch('default', function (newValue) {
          if (newValue) {
            $scope.selectedAddress = newValue;
          }
        });

        $scope.toSetDefaultPosition = function () {
          $scope.showBackBtn = false;
          $ionicSlideBoxDelegate.$getByHandle('PCTSelectDelegate').slide(0);
          $ionicScrollDelegate.$getByHandle('PCTSelectProvince').scrollTop();
          $scope.PCTModal.show();
        };

        //选择省
        $scope.chooseProvince = function (selectedProvince) {
          var selectedProvinceIndex;

          angular.forEach($scope.provincesData, function (item, index) {
            if (item === selectedProvince) {
              selectedProvinceIndex = index;
              return;
            }
          });


          selectedAddress = {};
          $scope.showBackBtn = true;
          $scope.citiesData = addressData['' + selectedProvinceIndex + ''];


          $ionicSlideBoxDelegate.$getByHandle('PCTSelectDelegate').next();
          $ionicSlideBoxDelegate.$getByHandle('PCTSelectDelegate').update();
          $ionicScrollDelegate.$getByHandle('PCTSelectCity').scrollTop();
          selectedAddress.province = selectedProvince;
        };

        //选择市
        $scope.chooseCity = function (selectedCity) {
          var selectedCityIndex;

          angular.forEach($scope.citiesData, function (item, index) {
            if (item === selectedCity) {
              selectedCityIndex = index;
              return;
            }
          });

          $scope.townData = addressData['' + selectedCityIndex + ''];

          selectedAddress.city = selectedCity;
          if (!$scope.townData) {
            selectedAddress.town = '';
            $scope.selectedAddress = selectedAddress;

            $rootScope.$broadcast('PCTSELECT_SUCCESS', {result: $scope.selectedAddress});

            $timeout(function () {
              $scope.PCTModal.hide();
            }, 200);
          }else{
            $ionicSlideBoxDelegate.$getByHandle('PCTSelectDelegate').next();
            $ionicSlideBoxDelegate.$getByHandle('PCTSelectDelegate').update();
            $ionicScrollDelegate.$getByHandle('PCTSelectTown').scrollTop();
          }
        };

        //选择县
        $scope.chooseTown = function (selectedTown) {
          selectedAddress.town = selectedTown;
          $scope.selectedAddress = selectedAddress;

          $rootScope.$broadcast('PCTSELECT_SUCCESS', {result: $scope.selectedAddress});

          $timeout(function () {
            $scope.PCTModal.hide();
          }, 200);
        };

        //slide返回上一级
        $scope.goBackSlide = function () {
          var currentIndex = $ionicSlideBoxDelegate.$getByHandle('PCTSelectDelegate').currentIndex();
          if (currentIndex > 0) {
            $ionicSlideBoxDelegate.$getByHandle('PCTSelectDelegate').previous();
          }
          if (currentIndex === 1) {
            $scope.showBackBtn = false;
          }
        };

        $scope.$on('$destroy', function () {
          $scope.PCTModal.remove();
        });
      }
    };
  })

奉上链接：http://runjs.cn/code/jmlmssfr