关注微信订阅号: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,如果你到这里碰到任何问题,欢迎通过下面的联系方式联系我。

[ionic开源项目教程] - 第11讲 封装BaseController实现controller继承的更多相关文章

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

    目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...

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

    目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...

  3. [ionic开源项目教程] - 第12讲 医疗模块的实现以及Service层loadMore和doRefresh的提取封装

    关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 这一讲主要实现tab2[医疗]模块,[医疗]模块跟tab1[健康]模块类似. [ionic开源项目教程] - 第12讲 医疗 ...

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

    [ionic开源项目教程] - 第8讲  根据菜单分类加载数据(重要) [效果图] 注意 今天遇到一个比较棘手的问题,就是左右滑动菜单的设计不合理性,所以tab1.html对应的视图层和control ...

  5. [ionic开源项目教程] - 第14讲 ionic解决跨域问题

    [ionic开源项目教程] 第14讲 使用jsonp解决跨域问题 相信很多朋友在开发中都会遇到以下这个问题. No 'Access-Control-Allow-Origin' header is pr ...

  6. [ionic开源项目教程] - 第13讲 Service层优化,提取公用Service,以及生活和农业两大模块的实现

    关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 这一讲主要实现生活和农业两大模块的实现,在这个过程中,对service层提取出一个公用的BaseService. 这一讲分为 ...

  7. [ionic开源项目教程] - 第2讲 新建项目,配置app.js和controllers.js搭建基础视图

    新建项目 由项目功能架构图选择合适的页面架构,这里选用Tab,ionic新建项目,默认的模板就是tab. $ ionic start TongeNews Creating Ionic app in f ...

  8. [ionic开源项目教程] - 第15讲 ionic用户个人中心登录注册的实现

    第15讲 ionic用户个人中心登录注册的实现 这一讲包括登陆.注册.个人中心.个人资料页面的实现. 在一讲的改动有四个地方: 在config.js里配置接口地址 完善个人中心的服务层(service ...

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

    第5讲 如何在项目中使用全局配置? Q:ionic开发,说纯粹一点,用的就是html+css+js,那么无疑跟web开发的方式是类似的.在这里给大家分享一个小技巧,如何在项目中使用全局配置? A:我的 ...

随机推荐

  1. 如何让360、遨游、猎豹等双核浏览器默认以webkit内核渲染网页?

    众知目前国内不少浏览器都自称双核,一般是 IE(Trident)+Webkit.因为 webkit 急速的体验和对 HTML5 的支持,有些情况下开发者可能希望用户优先甚至只使用 webkit 内核渲 ...

  2. HDU4831&&4832&&4834

    好久没打代码啦,今天lu一发百度之星,感觉还是学到不少东西的,写点收获. 第一题就是现在的HDU4831啦,题意很清楚,我一开始以为休息区也可以变为风景区,所以就不敢敲了,后来才得知数据里只会改风景区 ...

  3. POJ 1419

    #include <iostream> #define MAXN 105 #define max _max using namespace std; int j; bool _m[MAXN ...

  4. JUC回顾之-ThreadPoolExecutor的原理和使用

    Spring中的ThreadPoolTaskExecutor是借助于JDK并发包中的java.util.concurrent.ThreadPoolExecutor来实现的.基于ThreadPoolEx ...

  5. Add and Search Word - Data structure design

    https://leetcode.com/problems/add-and-search-word-data-structure-design/ Design a data structure tha ...

  6. JSON.stringify 函数 (JavaScript)

    在bsrck项目中,使用jQuery.Form.js的ajaxSubmit时,遇到有文件上传的form提交,在firefox和chrome浏览器中测试,报Bad Request的错误,经查代码后发现是 ...

  7. WPF之无法触发KeyDown或者KeyUp键盘事件

    有时候我们可能在Panel(StackPanel.Canvas.Grid)上或者是在一些默认不支持Focus的控件上添加了KeyDown或者KeyUp,可是残酷的现实告诉我们,这是无法触发的,怎么办呢 ...

  8. 使用 Dalvik 调试监控服务 (DDMS) 工具

    Android 附带一个叫Dalvik 调试监控服务 (DDMS) 的调试工具,它提供端口转发服务.在设备上的屏幕捕获,设备上的线程和堆栈信息, logcat,进程, 和无线状态信息,接收呼叫和SMS ...

  9. 什么是智能dns解析

    智能DNS解析是针对目前电信和网通互联互通不畅的问题推出的一种DNS解决方案.具体实现是:把同样的域名如test.winiis.com的A记录分别设置指向网通和电信IP,当网通的客户访问时,智能DNS ...

  10. Android 判断用户2G/3G/4G移动数据网络

    Android 判断用户2G/3G/4G移动数据网络 在做 Android App 的时候,为了给用户省流量,为了不激起用户的愤怒,为了更好的用户体验,是需要根据用户当前网络情况来做一些调整的,也可以 ...