I use Ionic and AngularJS. In layout.html I have:
<ion-pane>
<ion-header-bar class="header">
</ion-header-bar>
<ion-nav-bar align-title="center" class="bar-subheader">
<ion-nav-back-button class="button-clear">
<i class="ion-chevron-left"></i>
</ion-nav-back-button>
<ion-nav-buttons side="right">
<a class="button button-clear ion-drag" ui-sref="app.menu" ng-show="$root.showPublicMenu"></a>
<a class="button button-clear ion-drag" ui-sref="private.menu" ng-show="$root.showPrivateMenu"></a>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="layoutContent">
</ion-nav-view>
</ion-pane>
In the app.js I have:
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
if(toState.name!="otherwise"){
if(toState.name=="app.menu"){
$rootScope.$root.showPrivateMenu= false;
$rootScope.$root.showPublicMenu= true;
}
else if (toState.name=="private.menu"){
$rootScope.$root.showPrivateMenu= true;
$rootScope.$root.showPublicMenu= false;
}
}
});
When I test this with Ripple it's working, but when I test the application on device, Android or IOS, doesn't work.
Any idea?