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)