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)