Help, we can't get a parent nav-page with one child tab bar and sidemenu to work!

credli · December 10, 2013, 9:39am

Hi,

First off, Ionic is an awesome framework, we love how it’s cleanly designed and architected with performance in mind.

One thing though, my team and I are almost done with our app except for some annoyances. We have a nav-router wrapping our , all pages in our app live in separate templates wrapping their content in a <nav-page> element.

Now one of these templates must implement a Tab Bar with two tabs, the tab bar must also have its own header with a right button which triggers a right slide menu, and a left button to take us back to the main controller.

It’s been weeks that we aren’t able to wrap our heads around implementing this page in Ionic! A nasty trick we tried out is to hide the nav-router header with a navController.hide immediately when initializing our tabs page controller, showing a manual <header> element wrapped in an automatic <sideBars> with only a right menu defined. This however doesn’t look good at all and raises TypeError: ‘null’ is not an object (evaluating ‘this.el.style’) when sliding the menu.

What is the best way to deal with this?

Nick

max · December 11, 2013, 2:17am

Hey Nick. If I understand correctly, you want a “page” of the nav controller to show your tabbed interface, and then not have any navigation inside of it?

It should be possible. I’m going to block some time off tomorrow to see about this, as well as the case where we want to have a tabbed interface where the navigation happens inside one of the tab content areas.

If you had an example of what you are trying to do, that could help! Thanks.

credli · December 11, 2013, 4:04pm

Thanks Max,

Yes this is what we want to achieve with one addition, being a side right menu triggered by a header button (or swipe in header area), within any of the tab pages.

Here is our code:

<script type="text/ng-template" id="templates/profile.html">
    <nav-page id="locator-page">
        <header-bar title="'Locator'" class="bar bar-positive" right-buttons="rightButtons"></header-bar>
        <tabs tabs-style="tabs-primary" tabs-type="tabs-icon-only" animate-nav="false">
            <!-- Profile tab -->
            <tab title="Profile" ng-controller="ProfileCtrl">
                <content has-header="true">
                    <!-- Full width and height (100%) elements won't show anymore -->
                </content>
            </tab>
            
            <!-- Routes tab -->
            <tab title="Routes" ng-controller="RoutesCtrl">
                <content has-header="true">
                    <google-map id="location">
                    </google-map>
                </content>
            </tab>
            
            <!-- Favorites tab -->
            <tab title="Favorites" ng-controller="FavCtrl">
                <div class="list">
                    <a class="item item-icon-left">
                        {{fav.title}}
                    </a>
                </div>
            </tab>
        </tabs>
    </nav-page>
    
    <!-- Right menu, must appear in header of all tabs -->
    <div id="menu-right" class="menu menu-right">
        <header class="bar bar-header bar-dark">
            <h5 class="title">Friends List</h5>
        </header>
        <content has-header="true">
            <div class="list">
                <a class="item item-icon-left">
                    {{friend.name}}
                </a>
            </div>
        </content>
    </div>
</script>
<pane nav-router animation="slide-left-right-ios7">
    <nav-bar class="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
    <ng-view></ng-view>
</pane>

We appreciate your help!

PS: Starting v0.9.14 any full width & height elements inside inside the <content> won’t show. In our case it’s the map element in the second tab.

credli · December 12, 2013, 7:54pm

Hi again!

We managed to get our controller working after Hippo upgrade (0.9.16), our structure looks almost as we intended, but now we are having other issues:

My right header button would show in left area, alongside with the back button.
I lose that same header button immediately when I switch to any other tabs.

Here is my updated code:

<side-menus>
  <nav-page side-menu-content id="locator-page" title="locatorTitle" right-buttons="rightButtons">
    <tabs tabs-style="tabs-primary" tabs-type="tabs-icon-only" animate-nav="false">
      <!-- Profile tab -->
      <tab title="Profile" ng-controller="ProfileCtrl">
        <content has-header="true" has-tabs="true">
          <!-- content here -->
        </content>
      </tab>
      <!-- Routes tab -->
      <tab title="Routes" ng-controller="RoutesCtrl">
        <content has-header="true" has-tabs="true">
          <!-- content here -->
        </content>
      </tab>
    </tabs>
  </nav-page>
  <side-menu side="right">
    <header class="bar bar-header bar-dark">
      <h5 class="title">Colors</h5>
    </header>
    <content has-header="true">
      <div class="list">
        <a class="item item-icon-left" ng-repeat="color in colors">
          {{color.code}} {{color.name}}
        </a>
      </div>
    </content>
  </side-menu>
</side-menus>

Any clues?

Nick

max · December 13, 2013, 5:19pm

Hey Nick. Using tabs like this isn’t quite working yet. We are doing a big overhaul of the nav system to make it much better, and Adam is starting work on that today. I’ll look into the header things…

credli · December 13, 2013, 6:39pm

Hi Max, and thanks again.

I managed to achieve my goal with a simple trick. Apparently, the reason why I’m losing my right buttons is because my tabs simply reinitialize the header whenever I switch between them.

For this reason I had to set $scope.rightButton in my tab controllers instead of <nav-page>. To centralize my logic, I had to move my actual right button logic implementation to the parent controller, then on $scope.$on('tab.shown') hook I would set $scope.rightButtons = $scope.$parent.rightButtons; and this seems to do the job.

Here is my modified views:

<side-menus>
  <nav-page side-menu-content id="locator-page" title="locatorTitle">
    <tabs tabs-style="tabs-primary" tabs-type="tabs-icon-only" animate-nav="false">
      
      <!-- Profile tab -->
      <tab title="Profile" ng-controller="ProfileCtrl" right-buttons="rightButtons">
        <content has-header="true" has-tabs="true">
          <!-- content here -->
        </content>
      </tab>
      
      <!-- Routes tab -->
      <tab title="Routes" ng-controller="RoutesCtrl" right-buttons="rightButtons">
        <content has-header="true" has-tabs="true">
          <!-- content here -->
        </content>
      </tab>
    </tabs>
  </nav-page>
  <side-menu side="right">
    <header class="bar bar-header bar-dark">
      <h5 class="title">Colors</h5>
    </header>
    <content has-header="true">
      <div class="list">
        <a class="item item-icon-left" ng-repeat="color in colors">
          {{color.code}} {{color.name}}
        </a>
      </div>
    </content>
  </side-menu>
</side-menus>

The community behind Ionic Framework has great stamina and dedication. In couple of weeks from now we’re taking live a handful of mobile apps powered by Ionic.

timcash · January 3, 2014, 5:55am

I am trying to do the same thing. It is difficult to get side menus nav-pages and tabs to play nice together. Thanks for the example ill give it a try

darrenahunter · January 4, 2014, 10:59am

Hi credli
Thanks for you persistence in trying to get side menus with tab pages working. Looks like you are nearly there.
Any chance you could post up a sample project that help us others try to catch up. Enjoying Ionic but feel a little behind the pack at the moment.

Could I ask if you side menus with pages including tabs are also working on Android (v4.x)

thanks
Darren

credli · January 4, 2014, 6:12pm

Hey Darren,

Here is the sample Plunker snippet, albeit with some hacks and a nasty repeated rightButton logic.

I believe @max and Adam are working on an overhaul, until then I have decided to follow the “whatever works” principle

Also, my snippet seems to work fine on Android 4.1 and 4.2, I don’t know if it works on 4.3 and 4.4 though. I’ve read somewhere that starting 4.4 Android WebViews are chromium-powered, this could be promising since I can run Ionic apps on my Chrome browser without any issue.

Read more on http://blog.chromium.org/2013/11/introducing-chromium-powered-android.html.

Nick

darrenahunter · January 6, 2014, 5:33pm

Many thanks Credli

I will take a look when back from holidays.