Problems with directives updating to the new ionic 1.0.1 release



I had a running ionic app in a continuous development but a few days ago, trying to develop a specific functionality, I realized that I need the $ionicHistory module to close it. So I tried to use it and I didn’t achieve it.

Researching in google I found that the problem was in my “index.html”, in “ionic.bundle.js”. It seems like I had a very old version and this service wasn’t implemented yet (this was my version: So I tried to update my ionic bundle to the latest version, 1.0.1.

After that, I started my app again and I found that A LOT of things have broken… Some navbars, headers, custom directives… etc. Does anyone experienced the same problems?

The more interesting thing is that I use these simple directives to hide/show elements with rootScope values, for instance:


<ion-header-bar class="bar-positive item-input-inset" ng-show="$root.showSearchInput">
  <div class="item-input-wrapper">
    <i class="icon ion-ios7-search placeholder-icon"></i>
    <input type="search" placeholder="Search"/>
<ion-view title="Search" class="search-view" hide-sub-tab show-search-input hide-nav-bar="true">


.directive('showSearchInput', function($rootScope) {
  return {
    restrict: 'A',
    link: function($scope, $el) {
      $rootScope.showSearchInput = true;
      $scope.$on('$destroy', function() {
          $rootScope.showSearchInput = false;

(I also tried with “ng-if” but I get the same results…)

And they don’t work. When I goes back and forward the elements appear where they shouldn’t, I mean, the directives don’t hide/show the elements when they should do and I have, for instance, a search input over a navbar title.

Anyone has any idea? Anyone faced similar problems?

Thank you very much.


I found a more specific and understandable example of the thing that I can’t do since I updated to the new ionic:

<ion-tabs ng-hide="$root.hideTabs" class="tabs-icon-only">
    <!-- tabs -->
var module = angular.module('app.directives', []);
module.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function($scope, $el) {
            $rootScope.hideTabs = true;
            $scope.$on('$destroy', function() {
                $rootScope.hideTabs = false;
<ion-view title="New Entry Form" hide-tabs>
    <!-- view content -->

I’m trying to do the same but not in tabs, but in a header for example.

Thank you.