Conditionally add icon depending on template

ionic-v1
1

I am building an app that has a side menu on which I have a constant header for my views. This header has a button on the left to toggle side menu and one on the right that toggles a popover. I have a specific section in the app that needs a specific button in the header next to the popover icon and it will be used for just that section. I dont want the button displayed on any of the other pages, just this one Is there a way to conditionally add a button to the header for a specific page? I have looked through all the questions and cannot seem to find an answer

2

you can add additional info to your state-definitions like:

.state('myState', {
  url: '...',
  controller: '...',
  showButton: true
});

and in a base controller you can hang on the $stateChangeStart-Event:

$scope.$on('$stateChangeStart', function (event, toState) {
   if (toState.showButton) {
     // flag to show button
   } else {
     // unset flag
   }
});

in your template you can hide the button with ng-show or ng-if.

But you can also put your custom state data on the data-key

3

You could put that button in and put an ng-if on the button and check the current state. You could do something like:

$scope.$state = $state;

<div ng-if="$state.current.name == 'neededPage'></div>

$state.current has name, url, template, and controller.