Problems with directives updating to the new ionic 1.0.1 release

ionic-v1
1

Hi,

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: http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js). 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:

Templates:

<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"/>
  </div>
</ion-header-bar>

<ion-view title="Search" class="search-view" hide-sub-tab show-search-input hide-nav-bar="true">
  <ion-content>
    ...
  </ion-content>
</ion-view>

Directive:

.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.

2

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 -->
</ion-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 -->
</ion-view>

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

Thank you.