Add header button only for specific view


#1

Hello everyone,

I’m trying to add a header button only on specific view on Side Menu ionic template, like share button on posts view or additional popover menus on other views for exemple. Like the picture below shows it :

I’ve tried to use $rootScope to do that by change the value of $rootScope in the view controller when it’s loaded, but I’ve read that the navigation header seems to had a particular $scope who does not refresh (am I right ?) so it didn’t work.

I’ve already checked https://forum.ionicframework.com/c/ionic-v1 and https://ionicframework.com/docs/v1/api/directive/ionNavButtons/ but I don’t understand how to condition the display of the differents nav buttons.

Is that possible ?

Thanks and have a nice day ! :slight_smile:


#2

i think you can use ng-if=“condition”


#3

I’ve already tried with $rootScope value that I change when view controller is called and an ng-if condition to check the value and display the correct button to the view but it does not work for me


#4

can you post your code so that I as well as others can check if your code is correct…


#5

Sure ! There is my code (ask if you need more) :

menu.html

<ion-side-menus enable-menu-with-back-views="false">
	<ion-side-menu-content>

		<ion-nav-bar class="bar-positive">
			<ion-nav-back-button>
			</ion-nav-back-button>

			<ion-nav-buttons side="left">
				<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
				</button>
			</ion-nav-buttons>

			<!-- Button that I need to display only on specific views -->
			<ion-nav-buttons side="right" ng-if="root.menuState == true">
				<button class="button button-icon button-clear ion-share">
				</button>
			</ion-nav-buttons>

		</ion-nav-bar>
		<!-- /Header bar -->

		<ion-nav-view name="menuContent"></ion-nav-view>
	</ion-side-menu-content>

	<ion-side-menu side="left">
            [...]
	</ion-side-menu>
</ion-side-menus>

controllers.js

app.controller('AppCtrl', function($rootScope, $scope, $ionicModal, $timeout) {
 $rootScope.menuState = false;
 console.log('Menu Controller : $rootScope.menuState : false');

[...]
});

HomeController.js (for exemple)

app.controller('HomeController', function($scope, $http, $state, WordPress, $rootScope){

	$rootScope.menuState = true;
	console.log('Menu Controller : $rootScope.menuState : true');

        [...]

});

#6

try this ng-if="menuState" for true and ng-if="!menuState" for false

or

ng-if="root.menuState" for true and ng-if="!root.menuState" for false

but I think the 1st one is the best choice…


#7

I’ve already tried this solution and even now it doesn’t work :confused: But even if the no-$rootScope solution had worked, I need to pass the $scope to the menu.html view, it isn’t possible without $rootScope isn’t it ?


#8

maybe you should add it in platform.run function like:

 $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {

        if (toState.name == 'page1') {
            $rootScope.menuState = true;
        }
        else {
            $rootScope.menuState= false;
        }

    });

#9

I’ve added the following code in app.js without change anything into others files except the changes of $rootScope.menuState into my controllers. Still not work, sorry :confused:

app.run(function($ionicPlatform, $rootScope) {

	// MODS
	$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {

		if (toState.name == 'app.home') {
			console.log("App.Home");
			$rootScope.menuState = true;
		}
		else {
			$rootScope.menuState= false;
		}

	});
	// /MODS

       [...]

#10

can you try to use ng-show or ng-hide also? maybe something is wrong with your ng-if condition and try to console the menuState in the platform.run to identify if the given scope is correctly working/changing…


#11

ng-show and ng-hide does not work with menuState, root.menuState or menuState == true

the value of the $rootScope is correctly refreshed when I change of view, I can even display the value with {{ menuState }} on views like home.html or settings.html and we correcly swtich true to false. But it stills not works in menu.html where the ion-nav-bar is located…


#12

really strange to encounter that


#13

Yeah it’s breaking my mind since few days :unamused: thanks for your time in any case


#14

Welcome, I really don’t know what was the cause of your problem. Hopefully you fix it.


#15

When you access $rootScope in the template it is $root not root. Btw you don’t need rootScope for this.


#16

Hello @pliablepixels, I don’t really understand what you’re saying. How can I interact with the menu.html from another template without use the $rootScope ? Could you say more to me ?


#17

Usually, menu.html is scoped inside a controller, so you can use $ionicHistory inside that controller to get the active state.

Example: https://codepen.io/pliablepixels/pen/WyxmoQ


#18

Yeah it seems very cool but It still not works form me :confused: there is the code that I just try :

menu.html

<ion-nav-bar class="bar-positive">
	<ion-nav-back-button>
	</ion-nav-back-button>

	<ion-nav-buttons side="left">
		<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
		</button>
	</ion-nav-buttons>

        <!-- Button specific view -->
	<ion-nav-buttons side="right" ng-if="getStateName()"><!-- return true or false -->
		<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
		</button>
	</ion-nav-buttons>

</ion-nav-bar>

And in menu controller

$scope.getStateName = function() {
	 if($ionicHistory.currentStateName() == 'app.home'){
		 console.log('true'); //It log true when we are on the correct view
		 return true;
	  } else {
		 return false;
	  }
};

It work fine to detect in the controller that I’m on the correct view but it does not refresh my text on the header…


#19

Did my example work for you? I modified it to also update the text on the header


#20

No, actually, the value is correctly refreshed but only on the sidemenu area not in the header area like I want. I realy want to show some navigation buttons on the right of the top header bar when the user is on a particular view.