Ionic通过angularJS+tabs-item-hide实现自定义隐藏tab

简介:

1.index.html

 <script src="js/directive.js"></script>

2.directive.js

复制代码
angular.module('ibg.directives', []);

angular.module('ibg.directives').directive('hideTabs', function ($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {

            scope.$on('$ionicView.beforeEnter', function() {
                $rootScope.hideTabs = true;
                scope.$watch(attributes.hideTabs, function(value){
                    $rootScope.hideTabs = value;
                });
            });

            scope.$on('$ionicView.beforeLeave', function() {
                $rootScope.hideTabs = true;
            });
        }
    };
});
复制代码

3.tabs.html

<ion-tabs class="tabs-icon-top tabs-color-active-positive" ng-class="{'tabs-item-hide': $root.hideTabs}">
</ion-tabs>

4.不隐藏的tab

<ion-view view-title="IBeautyGuru" ng-controller="HomeCtrl" hide-tabs='false'>
</ion-view>

 


本文转自ZH奶酪博客园博客,原文链接:http://www.cnblogs.com/CheeseZH/p/4788569.html,如需转载请自行联系原作者

相关文章
|
Android开发 iOS开发
ionic3圆形tab的实现
github https://github.com/IonicBlog/ionic3-subtabs 效果图: iOS ios.png android android.png
843 0
|
Android开发
ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享)
ionic3项目实战教程 - 第13讲 ionic3社交分享(QQ分享和微信分享) 图片发自简书App 这一讲主要包含以下几个部分: 1.在微信开放平台创建应用获得wechatappid; 2.
1405 0
|
Android开发 iOS开发
ionic3项目实战教程 - 第12讲 ionic3制作icon和splash
这一讲主要包含以下几个部分: 1.设计icon; 2.设计splash; 3.生成各个平台各个尺寸的icon和splash; 1.设计icon 来,打开你的PS,新建-文件,像素为1024*1024,背景透明,确定; .
1170 0
|
Web App开发
ionic3项目实战教程 - 第11讲 ionic3个人中心界面设计
ionic3项目实战教程 - 第11讲 ionic3个人中心界面设计 这一讲主要包含一下几个部分: 1.个人中心ts具体代码展示; 2.个人中心html具体代码展示; 3.
1367 0
ionic3项目实战教程 - 第10讲 ionic3分类菜单设计(类似外卖)
注意,干货来了,相比前面几讲这一讲就要难以消化多了,请做好心理准备。 因为在这之前,经常看到有群友在求这种分类菜单的组建,今天我就为大家再造一个轮子 [微笑脸]。
1088 0
|
Web App开发
ionic3项目实战教程 - 第8讲 ionic3商品详情页的实现
这一讲主要包含以下几个部分: 1.创建商品详情页 2.获取商品详情页的数据 3.展示商品详情页的数据 1.创建商品详情页 执行 ionic g page product-details 8-1.
1063 0
|
Web App开发
ionic3项目实战教程 - 第9讲 ionic3应用内主题浏览器ThemeableBrowser的使用
这一讲主要实现商品的"抢购"功能 1.安装ThemeableBrowser插件; 2.使用ThemeableBrowser插件; 1.安装插件 分别执行以下命令: ionic cordova plugin add cordova-plugin-t...
1441 0
ionic3项目实战教程 - 第7讲 ionic3商品列表页的实现
这一讲主要包含以下几个部分: 1.创建商品列表页 2.根据分类获取商品列表 2.展示商品列表 1.创建商品列表页 执行 ionic g page product-list 7-1.
870 0
ionic3项目实战教程 - 第5讲 ionic3商城首页透明导航栏设计
这一讲主要包含以下几个部分 1.配置APP主色调; 2.设置ion-content组建的fullscreen属性; 3.设计透明导航栏 配置APP主色调; 找到src/theme/variables.
1331 0
|
Go
ionic3项目实战教程 - 第4讲 ionic3商城首页设计(幻灯片+图标分类)
商城首页主要包含以下几个部分 1.使用ion-slide实现首页幻灯片; 2.使用ion-grid实现商品分类; 3.使用ion-list实现商品列表; 说一下实现思路 1.先获取网络请求的数据,查看数据结构; 2.根据数据结构来判断需要展示的数据,编写html; 3.调整界面样式,编写scss; 准备工作 开始之前请到阿里开源图标库准备首页需要的小图标,不想自己找的同学,在文章最后的交流群的群文件里有导出好的资源小图标,下载后直接放到项目的src/assets/icon/目录中即可。
1130 0