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

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

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

目录

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

文章来自:http://www.cnblogs.com/tonge/p/5719563.html
© 2021 jiaocheng.bubufx.com  联系我们
ICP备案:鲁ICP备09046678号-3