angular公共页面提供公共服务（例如获取小区）

来源：互联网发布：淘宝如何查购买记录编辑：程序博客网时间：2024/04/30 07:22

需求：在开发中有个需求，需要获取用户的所在小区，用户需要跳转到小区页面，选择小区之后再回退到选择小区的页面（有多个页面都需要选择小区）。

思路：页面需要跳转到选择小区页面，既然是单独的页面，就有单独的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);};});

0 0