[ionic开源项目教程]

时间：2022-08-06 08:54:31

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

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

目录

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

[效果图]

[ionic开源项目教程]

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

标签：

相关文章