ionic 进入多级目录以后隐藏底部导航栏（tabs）(完美解决方案)

公司开始使用ionic开发项目，在此记录下把遇到的问题，网上有大牛已经把解决方法整出来了，不过记录在自己这里方便查阅。 
这篇记录在有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"])

app.directive('hideTabs', function($rootScope) {
  return {
    restrict: 'A',
    link: function(scope, element, attributes) {

      scope.$on('$ionicView.beforeEnter', function() {

        scope.$watch(attributes.hideTabs, function(value){
          $rootScope.hideTabs = 'tabs-item-hide';
        });

      });

      scope.$on('$ionicView.beforeLeave', function() {
        scope.$watch(attributes.hideTabs, function(value){
          $rootScope.hideTabs = 'tabs-item-hide';
        });
        scope.$watch('$destroy',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>

来自为知笔记(Wiz)