Demo example with Sidemenu and Tabs

[ptollena]

Thanks for putting your example about Ionic side menu and tabs. But this template only works if the menu mirror exactly the tabs. If for example I have a menu item not in a tab, I don't now where to define the NavView for it to work correctly.

[loringdodge]

Hey @ptollena,

Thanks for pointing that out. If you're creating an app with both a side-menu and tabs, you can still achieve where they don't exactly mirror but it requires creating an additional hidden tab that all other views render into. In order to achieve this, you first need to define a new tab:

<ion-tab title="general" class="tab-hidden">
    <ion-nav-view name="tab-general"></ion-nav-view>
</ion-tab>

This would normally be the 4th tab (from the example) and would be able to be navigated to by clicking on it's icon at the bottom but there's an Ionic CSS class 'tab-hidden' that will hide any tab it's added to. With this, we now have a general view to render into it via ui-router and we don't have to actually show a new tab.

Then, add a new item to the side menu. I'll go ahead and call it general, but you can have it be anything as long as it's mapped to a route defined in ui-router.

<ion-item menu-close href="#/app/general">
    General
</ion-item>

And in the router, define a new state, a url for that state, and a template url...all the while making sure that it's rendered in ' tab-general' (our view for everything else).

.state('app.[anything]', {
    url: "/[anything]",
    views: {
      'tab-general': {
        templateUrl: "templates/[anything].html"
      }
    }
  })

I went ahead and also made you a codepen to illustrate a working example.
Hope that helps,
Loring

[ptollena]

Hi Lori,

Thanks for the answer. It works but I think it is artificial. What I am trying to do is to combine the sidemenu and tabs template into one single app. On top of that I want the tabs to start with a fresh history. I have achieved the first part now I need to find the best way to clear the history when tab is click.

Thanks

Patrice

[loringdodge]

np @ptollena

I think I have a better understanding of what you're trying to achieve. Have you tried using the $ionicHistory module to set up the desired history timeline?

[ptollena]

Yes I did. I have tried to reset the history at the ng-click for the tabs but there are still issues of precedence I am trying to understand. In general, I think it should be easier to deal with those issues and have no navigation by default and then set the navigation when you need it.

Thanks

Patrice

On Jan 19, 2016, at 4:47 PM, Loring Dodge [email protected] wrote:

np @ptollena https://github.com/ptollena
I think I have a better understanding of what you're trying to achieve. Have you tried using the $ionicHistory http://ionicframework.com/docs/api/service/%24ionicHistory/ module to set up the desired history timeline?

—
Reply to this email directly or view it on GitHub #1 (comment).

[loringdodge]

@ptollena

The $ionicHistory docs state that:

Unlike a traditional browser environment, apps and webapps have parallel independent histories,
such as with tabs. Should a user navigate few pages deep on one tab, and then switch to a new
tab and back, the back button relates not to the previous tab, but to the previous pages
visited within that tab.

If you navigate from tab to tab, Ionic keeps a history of each tab independently but I think based on your comment above that's not what you're looking for. You want the history to be cleared whenever they click a new tab. Ng-click won't work in this case but there is a great example using the on-deselect attribute on the ion-tab directive (per this Stack Overflow Answer)

It requires that you add this to your element:

<ion-tab title="Browse" icon-off="ion-ios-glasses" icon-on="ion-ios-glasses" href="#/app/browse" on-deselect="showHistory()">
    <ion-nav-view name="tab-browse"></ion-nav-view>
</ion-tab>

And then in the parent controller, add:

.controller('AppCtrl', function($scope, $ionicHistory, $timeout) {
  $scope.clearHistory = function() {
    $ionicHistory.clearHistory();
  }
})

Is that what you're looking for? Also, I updated the codepen, I included in a previous comment.

Loring

[ptollena]

Hi Loring,

I have followed your recommendation but still have some issues. The main one is even if the history is reset the back button still appears with <Back instead of the previous navigation screen.

By the way do you have your example refactored for Ionic2?

Thanks

Patrice

On Jan 20, 2016, at 10:00 AM, Loring Dodge [email protected] wrote:

@ptollena https://github.com/ptollena
The $ionicHistory docs state that:

Unlike a traditional browser environment, apps and webapps have parallel independent histories,
such as with tabs. Should a user navigate few pages deep on one tab, and then switch to a new
tab and back, the back button relates not to the previous tab, but to the previous pages
visited within that tab.
If you navigate from tab to tab, Ionic keeps a history of each tab independently but I think based on your comment above that's not what you're looking for. You want the history to be cleared whenever they click a new tab. Ng-click won't work in this case but there is a great example using the on-deselect attribute on the ion-tab directive (per this Stack Overflow Answer http://stackoverflow.com/questions/30569610/navigate-across-history-stacks-ionic-ion-tabs)

It requires that you add this to your element:

And then in the parent controller, add:

.controller('AppCtrl', function($scope, $ionicHistory, $timeout) {
$scope.clearHistory = function() {
$ionicHistory.clearHistory();
}
})
Is that what you're looking for? Also, I updated the codepen, I included in a previous comment.

Loring

—
Reply to this email directly or view it on GitHub #1 (comment).

[loringdodge]

@ptollena

I don't have the example in Ionic 2 yet but I plan on picking it up after reviewing Angular 2 more in depth before it comes out of beta.

It's difficult to solve your problem without any of your code. The only additional advice I can give regarding the back button is to point you toward this Ionic Forum post by Ionic team member brandyshea. In her post, she describes how she wraps a function called goHome() in a service and calls that function every time she navigates to a home screen. In the function, she resets the root in $ionicHistory.

app.service('sharedFunctions', function($state, $ionicHistory) {
    return {
        goHome: goHome
    };

    function goHome() {
        $ionicHistory.nextViewOptions({
            disableAnimate: true,
            historyRoot: true
        });
        $state.go('home');
    }
});

There's a more descriptive spiel in her post.