[ionic开源项目教程] - 第11讲 封装BaseController实现controller继承

关注微信订阅号：TongeBlog，可查看[ionic开源项目]全套教程。

截止到第10讲，tab1[健康]模块的功能基本已经完成了，但这一讲中，controller层又做了较大的改动，因为下一讲中tab2[医疗]模块的实现跟tab1类似，考虑到不让代码冗余，这里使用BaseCtrl将公共代码提取出来作为controller的基类，供其它模块使用，提取后的[健康]模块也对应有所改动。

目录

• [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令

• [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js

• [ionic开源项目教程] 第3讲 使用Tabs和SlideBox实现左右滑动菜单

• [ionic开源项目教程] 第4讲 通过Service层获取新闻列表

• [ionic开源项目教程] 第5讲 如何在项目中使用全局配置

• [ionic开源项目教程] 第6讲 过滤器filter的使用

• [ionic开源项目教程] 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll

• [ionic开源项目教程] 第8讲  根据菜单分类加载数据(重要)

• [ionic开源项目教程] 第9讲 新闻详情页的实现[ionic开源项目教程]

• [ionic开源项目教程] 第10讲 新闻详情页的用户体验优化

• [ionic开源项目教程] 第11讲 封装BaseController实现controller继承
• [ionic开源项目教程] 第12讲 医疗模块的实现以及Service层loadMore和doRefresh的提取封装
• ​[ionic开源项目教程] 第13讲 Service层继续优化，提取公用Service，以及生活和农业两大模块的实现

[ionic开源项目教程] - 第11讲 封装BaseController实现controller继承

[效果图]

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，如果你到这里碰到任何问题，欢迎通过下面的联系方式联系我。