CODEWITHSUNDEEP
angularjsionic-frameworkionic-view
Syed
Syed

Reputation: 16513

Show/hide buttons in "ion-nav-bar" with respect to view

I like to hide and show icons depending on view. Which I am not able to do because ion-nav-bar is being accessed only from tabsCtrl

Here is view Markup:

<ion-nav-bar class="bar-stable">
  <ion-nav-back-button> </ion-nav-back-button>
  <ion-nav-title>My App Title</ion-nav-title>
  <ion-nav-buttons side="right">
    <button class="button icon ion-ios-information-outline" ng-click="openFaqModal()" ng-hide="showHideFAQ"></button>
    <button class="button icon ci-bookmark" ng-click="openBoookmarkModal()" ng-show="showHideBookmark"></button>
  </ion-nav-buttons>
</ion-nav-bar>

Here is controller:

// Tab Controller - *** This Work ***
.controller('TabCtrl', function ($scope) {
  $rootScope.showHideFAQ = true;
  $rootScope.showHideBookmark = true;
})

// Detail Controller - *** This do not work ***
.controller('DetailCtrl', function ($scope) {
  $rootScope.showHideFAQ = true;
  $rootScope.showHideBookmark = true;
})

Here is Route:

// setup an abstract state for the tabs directive
.state('tab', {
  url: '/tab',
  abstract: true,
  templateUrl: 'views/tabs.html',
  controller: 'TabCtrl'
})

.state('tab.detail', {
  url: '/resources/:resourcesId',
  views: {
    'tab-resources': {
      templateUrl: 'views/detail.html',
      controller: 'DetailCtrl'
    }
  }
})

I am not sure why it's working in "TabCtrl" but not in "DetailCtrl" as both the controller is loaded in one view. I have a doubt it's something to do with scope.

Upvotes: 0

Views: 477

Answers (1)

Syed
Syed

Reputation: 16513

I am using $ionicView.enter and $ionicView.leave to solve my issue:

// Detail Controller
.controller('DetailCtrl', function ($scope, $ionicView) {
  // Show Bookmark and Hide FAQ icon
  $scope.$on('$ionicView.enter', function() {
    $rootScope.showHideFAQ = true;
    $rootScope.showHideBookmark = true;
  });

  // Hide Bookmark and Show FAQ icon
  $scope.$on('$ionicView.leave', function() {
    $rootScope.showHideFAQ = false;
    $rootScope.showHideBookmark = false;
  });
})

Upvotes: 0

Related Questions