关注微信订阅号：TongeBlog，可查看[ionic开源项目]全套教程。
截止到第10讲，tab1[健康]模块的功能基本已经完成了，但这一讲中，controller层又做了较大的改动，因为下一讲中tab2[医疗]模块的实现跟tab1类似，考虑到不让代码冗余，这里使用BaseCtrl将公共代码提取出来作为controller的基类，供其它模块使用，提取后的[健康]模块也对应有所改动。
目录
-
[ionic开源项目教程] 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll
- [ionic开源项目教程] 第11讲 封装BaseController实现controller继承
- [ionic开源项目教程] 第12讲 医疗模块的实现以及Service层loadMore和doRefresh的提取封装
- [ionic开源项目教程] 第13讲 Service层继续优化，提取公用Service，以及生活和农业两大模块的实现
[ionic开源项目教程] – 第11讲 封装BaseController实现controller继承
[效果图]
![[ionic开源项目教程] – 第11讲 封装BaseController实现controller继承](https://img.zhankr.net/poetncw00r0148303.gif)
1.封装BaseController
.controller('BaseCtrl', function ($scope, $rootScope, $ionicSlideBoxDelegate, $ionicTabsDelegate) { $rootScope.imgUrl = server.imgUrl; //slide集合 $scope.slides = $scope.classify; //顶部菜单 $scope.tabs = $scope.classify; $scope.getData = function (c) { // 安卓平台不会自动触发加载 if (ionic.Platform.isAndroid()) { c.doRefresh(); } // 初始化数据，和回调函数 c.isload = false; c.callback = function () { $scope.$broadcast('scroll.refreshComplete'); $scope.$broadcast('scroll.infiniteScrollComplete'); } } // 初始化第一个tab的数据 $scope.getData($scope.classify[0]); //重要：因为页面中用了n个tabs组建，所以这里通过每个controller对应的currentTabId来判断哪个tabs来做选中操作。 var selectTab = function (index) { angular.forEach($ionicTabsDelegate._instances, function (tabs) { if ($scope.currentTabId == tabs.$element[0].id) { tabs.select(index); } }) } $scope.slideChanged = function (index) { var c = $scope.classify[index] $scope.getData(c); //选中tabs selectTab(index); }; $scope.$on('$ionicView.afterEnter', function () { //选中tabs selectTab($ionicSlideBoxDelegate.currentIndex()); }); $scope.selectedTab = function (index) { //滑动的索引和速度 $ionicSlideBoxDelegate.slide(index) } $scope.$on('$ionicView.beforeEnter', function () { console.log('已经成为活动视图'); $ionicTabsDelegate.showBar(true); });})
2.controller的基类封装完成后，调整[健康]模块的tab1.html和Tab1Ctrl的代码。
tab1.html，这里将tabs组建做了唯一标识。
<ion-tabs id="{{currentTabId}}" class="tabs-striped tabs-top"> <ion-tab ng-repeat="item in tabs" on-select="selectedTab($index)" title="{{item.name}}"></ion-tab> </ion-tabs>
Tab1Ctrl，这里直接调用BaseCtrl中的函数，注意这里的currentTabId的唯一标识。
.controller('Tab1Ctrl', function ($scope, $state, $controller, Tab1Service, $ionicTabsDelegate) { $scope.classify = Tab1Service.getClassify() $scope.currentTabId = "tab1"; //调用父级控制器之前先初始化需要的数据 这里要准备的就是分类 和 tab的索引 $controller('BaseCtrl', { $scope: $scope }); $scope.goDetails = function (item, type) { $state.go('tab.tab1-details', { id: item.id, title: item.title, type: type }) $ionicTabsDelegate.showBar(false); }})
可以看到Tab1的代码简化10行都不到，大部分操作到在BaseCtrl里。下一讲实现[医疗]模块也同样是这个做法。
ok，如果你到这里碰到任何问题，欢迎通过下面的联系方式联系我。
