ionic 进入二级目录以后隐藏底部导航栏(tabs)

有tabs的项目里,进入子层级时,底部导航还一直存在,本人是要让他只在首页几个界面存在,其他的隐藏,在这里用到了angularjs的指令,要完成这个步骤分为三步:

1.在标签ion-tabs中添加:ng-class=”{‘tabs-item-hide’: $root.hideTabs}”,源码如下:

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

2.添加angularjs的指令,源码如下:

//app已经在其他文件中指定,如var app = angular.module("starter",["ionic"])
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
  .directive('hideTabs', function ($rootScope,$location) {
    return {
      restrict: 'AE',
      link: function (scope, element, attributes) {
        scope.$on('$ionicView.beforeEnter', function () {
          scope.$watch(attributes.hideTabs, function (value) {
            $rootScope.hideTabs = value;
            if ($location.path() == '/main_tab/mian' || $location.path() == '/main_tab/mian') {
              //scope.$on('$ionicView.beforeLeave', function() {
              //  $rootScope.hideTabs = false;
              //});
            }
          })
        })
      }
    }
  })

3.三你想要隐藏的界面标签 ion-view添加表达式hide-tabs=”true”,源码如下:

//这是官网模板中的文件<ion-view hide-tabs="true" view-title="{{chat.name}}">

  <ion-content class="padding">

    <img ng-src="{{chat.face}}" style="width: 64px; height: 64px">
    <p>
      {{chat.lastText}}
    </p>
  </ion-content></ion-view>


你可能感兴趣的:(ionic 进入二级目录以后隐藏底部导航栏(tabs))