发表于   |   分类于   |  

昨天有时间想重写下之前技术部小黄写的城市右拉， 主要用的功能是ionic 自带的 ion-side-menus 和 ionicSideMenuDelegate。
配置路由：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.state('choosePovince',{
  cache:false,
  url:'/choose_port',
  abstract:true,
  templateUrl:'templates/jiesongji/choose_porvince_main.html',
  controller:'JiejiCtrl'
})
/**
 * 右侧滑动
 * @type {应用框架自带的滑动更好解决}
 */
.state('choosePovince.city',{
  cache:false,
  url:'/city',
  views:{
    'menuContent' :
    {
      templateUrl: "templates/jiesongji/porvince_main.html",
      controller:'JiejiCtrl'
    },
    'right-menu':
    {
      templateUrl : "templates/jiesongji/city_right.html",
      controller:'JiejiCtrl'
    }
  },
  params: {
    p_obj: null
  }
})

第一层路由是声明右拉的父级关联模板。
Html模板choose_porvince_main.html：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ion-side-menus>
        <ion-pane ion-side-menu-content>
          <ion-nav-bar class="bar bar-header top-header">
              <ion-nav-buttons>
                <button class="button button-clear" ng-click="goBack()"><i class="icon ion-chevron-left"></i></button>
              </ion-nav-buttons>
              <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
          </ion-nav-bar>
            <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
        </ion-pane>
        <ion-side-menu side="right">
              <header class="bar bar-header top-header">
                  <h1 class="title">选择城市</h1>
              </header>
              <ion-content class="has-header">
                <ion-nav-view name="right-menu">
                </ion-nav-view>
              </ion-content>
        </ion-side-menu>
</ion-side-menus>

第二层路由声明右拉的模板与主模板。
Html 模板 porvince_main.html：

1
2
3
4
5
6
7
8
9
10
11
12
<ion-view title="选择城市">
  <ion-content>
      <ion-list>
        <ion-item ng-click="right_menu(province.pro_id);" ng-repeat="province in ProvinceList">
        <!-- <ion-item ng-click="show_province();"> -->
             <span>{{province.province}}</span>
        </ion-item>
      </ion-list>
  </ion-content>
</ion-view>

Html 模板 city_right.html

1
2
3
4
<ion-item ng-repeat="city in citys" style="height:50px;">
        <span>{{city.city_name}}</span>
        <span></span>
</ion-item>

Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/**
 * [show_province 加载省份]
 * @return {[type]} [description]
 */
$scope.show_province = function(){
    var param = {
        code: "25c85dd791fd81f528eb550d6c107dcf"
    };
    chaXunProvinceFactory.getChaXunProvince(param).then(function(callback) {
        if (callback.status == 200) {
            // debugger
            $state.go('choosePovince.city',{p_obj:callback.data.content});
            // $scope.ProvinceList = callback.data.content;
        }
    });
}
/**
 * 通过路由的对象传值，渲染ProvinceList显示数据
 * @param  {[type]} angular.isObject($stateParams.p_obj) [description]
 * @return {[type]}                                      [description]
 */
if (angular.isObject($stateParams.p_obj)) {
    $scope.ProvinceList=$stateParams.p_obj;
};
/**
 * 这里是重点，当点击事件发生时，向父级scope对象发送监听对象请求，传值。
 * @param  {[type]} obj [description]
 * @return {[type]}     [description]
 */
$scope.right_menu = function(obj){
    $ionicSideMenuDelegate.toggleRight();
    $scope.$emit('cities',obj);
}
/**
 * 父页面监听，如果接收到点击请求，则通过接口获取动态数据，同时赋值给$scope对象。
 * @param  {[type]} e    [description]
 * @param  {Object} d){                var param [description]
 * @return {[type]}      [description]
 */
$scope.$on('cities',function(e,d){
   var param = {
        code: "25c85dd791fd81f528eb550d6c107dcf",
        pro_id: d
    };
    chaXunProvinceFactory.getChaXunCity(param).then(function(callback) {
        if (callback.status == 200) {
            $scope.citys = callback.data.content;
        }
    });
});

最终效果：
效果图
效果图

发表于   |   分类于   |  

ionic 项目里常常遇到页面间传值的情况，一般是这样的：

1
2
3
4
5
6
7
8
9
.state('tab.chat-detail', {
				url: '/chats/:chatId',
				views: {
					'tab-chats': {
						templateUrl: 'templates/chat-detail.html',
						controller: 'ChatDetailCtrl'
					}
				}
			})

但遇到对象时,应做如下处理:

1
2
3
4
5
6
7
$stateProvider.state('users', {
    url: '/users',
    controller: 'UsersCtrl',
    params: {
        obj: null
    }
})

1
2
3
function UserCtrl($stateParams) {
    conrole.log($stateParams);
}
1
$state.go('users', {obj:yourObj});

发表于   |   分类于   |  

ionic手动清除页面方法：

1
2
3
4
$scope.$on("$ionicView.beforeEnter", function () {
  $ionicHistory.clearCache();
  $ionicHistory.clearHistory();
});

发表于   |  

###隔离事件
中午在项目里遇到angular directive 里加入click事件，不能正常工作，查询API后，基本可以通过angularjs 的隔离scope 完成，具体实现如下：

html

1
<mobi edit-click="selectMobiFlag(1)" item="item"></mobi>

html 端定义了mobi的指令， 具体点击事件方法如selectMobileFlat,

指令（Directive）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.directive('mobi', function() {
	return {
		restrict: 'EA',
		scope: {
			'item':'=',
			'editClick': '&'
		},
		template: '<div ng-click="toggleState(item)" >111</div>',
		link: function($scope, element, attrs) {
			$scope.toggleState = function(item){
				console.log(item);
				$scope.editClick(item);
			};
		}
	};
})

指令里绑定了item,传入的是点击 HTML片段本身，在directive里渲染了template 模板，主要负责点击的声明，在隔离作用域里，应用editClick:"&" 和 $scope.toggleState 实现关联。

###最后
实现selectMobiFlag的具体实现:

1
2
3
4
$scope.selectMobiFlag = function(item) {
	
	$scope.mobiFlag = item;
}