{"id":7821,"date":"2015-10-30T07:31:41","date_gmt":"2015-10-30T07:31:41","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/10\/30\/how-do-i-hide-the-tabs-in-ionic-framework-open-source-projects-driftyco-ionic\/"},"modified":"2015-10-30T07:31:41","modified_gmt":"2015-10-30T07:31:41","slug":"how-do-i-hide-the-tabs-in-ionic-framework-open-source-projects-driftyco-ionic","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/10\/30\/how-do-i-hide-the-tabs-in-ionic-framework-open-source-projects-driftyco-ionic\/","title":{"rendered":"How do I hide the tabs in Ionic Framework-open source projects driftyco\/ionic"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/b3a61208da05290c69e36ba591459b74?s=128&amp;d=identicon&amp;r=PG\" \/> <strong>Daniel Rochetti<\/strong><\/p>\n<p>I know that this is answered already, but there&#8217;s a more &#8220;angular way&#8221; of doing this that might be helpful. It&#8217;s done by using a custom directive that you can apply on views that you don&#8217;t want to show the bottom tab bar.<\/p>\n<p>My solution to this on my app was:<\/p>\n<p>1 &#8211; Use <code>ng-hide<\/code> binded to a rootScope variable on the tab bar, so I can hide\/show it in any Controller\/View of my app:<\/p>\n<pre><code>\n    \n\n<\/code><\/pre>\n<p>2 &#8211; Create a custom directive that, when present, will hide the tab bar (and will show the tab bar again when the view is destroyed\/dismissed:<\/p>\n<pre><code>var module = angular.module('app.directives', []);\nmodule.directive('hideTabs', function($rootScope) {\n    return {\n        restrict: 'A',\n        link: function($scope, $el) {\n            $rootScope.hideTabs = true;\n            $scope.$on('$destroy', function() {\n                $rootScope.hideTabs = false;\n            });\n        }\n    };\n});\n<\/code><\/pre>\n<p>3 &#8211; Apply it to specific views that don&#8217;t need the tab bar visible:<\/p>\n<pre><code>\n    \n\n<\/code><\/pre>\n<p><strong>ps<\/strong>: I think this can be improved even further avoiding the need of the <code>ng-hide<\/code> on the declaration, letting the directive do all the &#8220;dirty work&#8221;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Daniel Rochetti I know that this is answered already, but there&#8217;s a more &#8220;angular way&#8221; of doing this that might be helpful. It&#8217;s done by using a custom directive that you can apply on views that you don&#8217;t want to show the bottom tab bar. My solution to this on my app was: 1 &#8211; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7821","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7821","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=7821"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7821\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7821"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7821"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}