需求：在开发中有个需求，需要获取用户的所在小区，用户需要跳转到小区页面，选择小区之后再回退到选择小区的页面（有多个页面都需要选择小区）。
思路：页面需要跳转到选择小区页面，既然是单独的页面，就有单独的controller和service，因此，最好的方式是让“选择小区”作为一个“公共服务”，适用于所有的页面
小区的控制器 jiazhengXiaoquController.js
//选择地区
angular.module("jiazhengApp").controller("jiazhengXiaoquController", ["$scope", "$state",'xiaoquService', function ($scope, $state, xiaoquService) {
xiaoquService.getLocation($scope);
//回退到上一个页面
$scope.back = function(){
xiaoquService.goBack();
};
//选择小区触发的事件
$scope.selectXiaoqu = function(myevent,xid){
var currentObj = $(myevent.target).closest("li");
var xiaoquName = currentObj.find("h2").html();
var xiaoquJson = {};
xiaoquJson[xid] = xiaoquName;
repairDeviceDataShareServer.xiquLocation = xiaoquJson;
this.back();
};
//显示下拉列表
$scope.showDistrictList = function(){
$(".district_class").toggle();
};
//选中下拉内容
$scope.itemSelected = function(myevent,nid){
var currentObj = $(myevent.target);
$("#btnValue").html(currentObj.html());
var url;
if(nid != "" && nid != undefined && nid != null){
url = "/index.php/Wap/Community/AjaxIndex.html?area="+nid+"&city=197";
}
xiaoquService.getLocation($scope,url);
};
}]);
小区服务xiaoquService
/**
* 选择小区服务
*/
angular.module("jiazhengApp")
//共享数据的服务
.factory("xiaoquService",function($http,$ionicPopup,$state){
return {
//存储用户选中的位置
xiquLocation:{},
//浏览器是否支持定位
isSupportLocation : function(){
if(navigator.geolocation){
return true;
}else{
//浏览器不支持geolocation
alert('浏览器不支持地理位置获取！');
return false;
}
},
getLocation : function(__scope__,myurl){
function onSuccess(position){
//返回用户位置
//经度
var longitude =position.coords.longitude;
//纬度
var latitude = position.coords.latitude;
//var map = new BMap.Map("container");
//map.centerAndZoom(new BMap.Point(longitude, latitude), 11);
// 创建地理编码实例
var myGeo = new BMap.Geocoder();
// 根据坐标得到地址描述
myGeo.getLocation(new BMap.Point(longitude, latitude), function(result){
if (result){
var address = result.addressComponents.city+result.addressComponents.district;
//异步加载数据
var url = "/index.php/Wap/Community/AjaxIndex.html";
if(myurl != undefined && myurl != "" && myurl != null){
url = myurl;
}
$.ajax({
// type: 'GET',
url: url ,
data: {city:result.addressComponents.city,district:result.addressComponents.district} ,
// dataType: 'json',
success: function(data){
if(data.status == 1){
__scope__.$apply(function(){
__scope__.lists = data.data.list;
});
}
}
});
}
});
}
function onError(){
var url = "/index.php/Wap/Community/AjaxGetXq.html";
$.ajax({
url: url ,
// dataType: 'json',
data: {city:197,area:""} ,
success: function(data){
if(data.status == 1){
__scope__.$apply(function(){
__scope__.lists = data.data.list;
});
}
}
});
}
//检查浏览器是否支持定位
if(this.isSupportLocation()){
var options={
enableHighAccuracy:true,
maximumAge:1000
};
navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
}
},
//记录上一个页面的路径
backUrl:'',
//回退到上一个页面
goBack:function(){
$state.go(this.backUrl);
}
};
});
备注：
1、xiaoquService 有两个值xiquLocation（存储小区的ID号和名称） 和 backUrl（回退到上一个页面的URL），这两个值可以提供给任意引入xiaoquService的controller使用，是一个静态属性。
2、goBack方法实际上是根据backUrl回退页面
引入小区服务的控制器
angular.module("jiazhengApp").controller("khbjIndexController", ["$scope", "$state", '$ionicPopup',
'khbjIndexService','dateService','xiaoquService',
function ($scope, $state, $ionicPopup,khbjIndexService,dateService,xiaoquService) {
//获取小区的位置
var xiaoquKey=0;
for(var key in xiaoquService.xiquLocation){
xiaoquKey = key;
khbjIndexService.formData["xiaoqu"] = xiaoquService.xiquLocation[key];
}
}]);
进入小区页面的入口HTML页面
<ion-header-bar class="bg_fdd000" align-title="center">
<button class="button button-clear " ng-click="goTo('jiazhengIndex')">
<span class="icon ion-ios-arrow-left color_e5005a">
</span>
</button>
<h1 class="title color_e5005a">
开荒保洁
</h1>
</ion-header-bar>
<ion-content class="bg_f0f0f0">
<div class="bg_ff">
<ul class="list">
<li class="item" ng-click="goTo('khbjServiceIntroduce')">
<div class="float_left color_e5005a">
服务须知：
</div>
<div class="float_right">
<span class="icon ion-chevron-right color_99" style="font-size: 14px;">
</span>
</div>
<div class="clear_both">
</div>
</li>
<li class="item item-input">
<span class="input-label">
房屋面积:
</span>
<input type="text" class="text-right" placeholder="≥30平方米" ng-model="formData.houseArea">
</li>
<li class="item" ng-click="showDateDialog()">
<div class="float_left">
服务日期:
</div>
<div class="float_right">
<span class="" ng-bind="formData.orderDate">
</span>
<span class="color_e5005a">
修改
</span>
<span class="icon ion-chevron-right color_99" style="font-size: 14px;">
</span>
</div>
<div class="clear_both">
</div>
</li>
<li class="item" ng-click="goTo('jiazhengXiaoqu')">
<div class="float_left">
选择小区:
</div>
<div class="float_right">
<span class="" ng-bind="formData.xiaoqu">
</span>
<span class="color_e5005a">
修改
</span>
<span class="icon ion-chevron-right color_99" style="font-size: 14px;">
</span>
</div>
<div class="clear_both">
</div>
</li>
<li class="item item-input">
<span class="input-label">
服务要求
</span>
<input type="text" class="text-right" placeholder="请输入服务要求" ng-model="formData.request">
</li>
</ul>
</div>
<div class="padding_left_15 padding_right_15 margin_top_10">
<div class="">
<span class="font_18 icon ion-ios-checkmark">
</span>
<span class="">
我已认真阅读并同意
</span>
<span class="color_e5005a" ng-click="goTo('jiazhengProtocol')">
《社区惠开荒保洁协议》
</span>
</div>
</div>
<div id="bottom_div_show">
</div>
</ion-content>
<div class="footer_fixed bg_ff all_width padding_top_5 padding_bottom_5 text-center">
<button ng-click="startOrder()" class="button btn_sqh_yellow margin_center border_radius35 clear_border"
style="padding:0 30px;">
立即预约
</button>
</div>
备注：
goTo()方法是绑定到$rootScope中的，相当于是一个全局方法，代码如下：
angular.module("jiazhengApp").run(function($rootScope,$state,xiaoquService){
//定义一个全局函数，跳转到指定的页面
$rootScope.goTo = function(urlState){
//如果跳转到页面是选择小区,则记录当前页面，方便回退
if(urlState == 'jiazhengXiaoqu'){
var stateName = $state.current.name;
xiaoquService.backUrl = stateName;
}
$state.go(urlState);
};
});