Side Menu not loading views

Hi guys,

I’ve been having some issues with the side menu and can’t seem for the life of me, to understand what’s missing…

My index.html has a ion-nav-view where the main view is loaded.

Inside that main view I have the following

    <ion-pane ion-side-menu-content>
        <ion-nav-bar class="bar-stable nav-title-slide-ios7"></ion-nav-bar>
        <ion-nav-view name="menuContent" animation="slide-right-left"></ion-nav-view>
    <ion-side-menu side="left">
        <ion-header-bar align-title="center" class="disable-user-behavior bar-dark">
            <h1 class="title">Features</h1>
        <ion-content class="ionContentOfFeature blackBackground">
                <ion-item  ng-click="ItemClicked(tabs[0])" nav-clear menu-close class="item-icon-left item-icon-right more-item" ng-class="{{tabs[0].iconClass}}">
                    <i class="icon {{tabs[0].iconOn}} {{tabs[0].class}} atMoreTabLeftIcon"></i>
                    <i ng-class="tabs[0].iconElement"></i>
                <ion-item  ng-click="ItemClicked(tabs[1])" nav-clear menu-close class="item-icon-left item-icon-right more-item" ng-class="{{tabs[1].iconClass}}">
                    <i class="icon {{tabs[1].iconOn}} {{tabs[1].class}} atMoreTabLeftIcon"></i>
                    <i ng-class="tabs[1].iconElement"></i>
                <ion-item  ng-click="ItemClicked(tabs[2])" nav-clear menu-close class="item-icon-left item-icon-right more-item" ng-class="{{tabs[2].iconClass}}">
                    <i class="icon {{tabs[2].iconOn}} {{tabs[2].class}} atMoreTabLeftIcon"></i>
                    <i ng-class="tabs[2].iconElement"></i>

My Tab Module is the following

$stateProvider.state('tab', {
	url: '/tab',
	abstract: true,
        templateUrl: '/at/core/tabbar/TabBar.html',
        controller: 'TabBarCtrl'
           url: "/gallery",
           views: {
           'menuContent': {
                 templateUrl: "/at/core/features/gallery/Gallery.html",
                 controller: "GalleryCtrl"



Basicaly I have two issues.

1- The default View is not rendered. The $stateChangeSuccess and $viewContentLoading are triggered but the controllers of that views are not initialized.
2- On side menu click to render different views, there’s also no rendering of the new view and the $viewContentLoaded isn’t triggered…

I had before a tab implementation but I want to have a different navigation logic for android (if that makes any sense, to have two different logics for different platforms)

Can’t seem to figure out what’s wrong but I believe it’s going to be some sort of dumb mistake. I’m using the latest ionic version 1.0.0 - rc2

Thanks in advance

1 Like

Can you reproduce this in a codepen? I put your code in a codepen based on your explanation and it is loading the main view:

Also, if all of your items in the sidemenu are the same markup, I recommend putting them in an ng-repeat (this code is also in the codepen example above):

<ion-item ng-repeat="tab in tabs" ng-click="ItemClicked(tab)" nav-clear menu-close class="item-icon-left item-icon-right more-item" ng-class="{{tab.iconClass}}">
    <i class="icon {{tab.iconOn}} {{tab.class}} atMoreTabLeftIcon"></i>
    <i ng-class="tab.iconElement"></i>

Found what the issue is… It’s because of a hack I have to load the tab navigation dynamically. Removing that hack I can load the side menu without an issue but screws up the loading of the tab navigation for iOS


Not quite sure I it doesn’t work with the hacked version. If somebody could enlighten me that would be good.

So my problem now is how to make it work without any hacks … both for tabs and for side menu. Or just ditch the side menu at all …

I was using ng-repeat for the load of the side menu but removed because I thought the issue might be from that

Probably not the best place for it, but managed to discard the patch for dynamic tab name by using the following directive

.directive('dynamicNavView', function($compile) {
        'use strict';

return {
    restrict: 'ECA',
    priority: -400,
    link: function(scope, $element, $attr, ctrl) {
        var dynamicName = scope.$eval($;
        $element.html('<ion-nav-view name="' + dynamicName + '"></ion-nav-view>');
}); , check brianfoody post

Another issue with the side menu navigation

If I select, on the side menu, a new tab I get taken to that view but then I can’t open the menu again.
On the simulator I can swipe back but it takes me to the previous view (Gallery) and not the side menu.

I’ve inspected in the simulator and it’s creating a second view instead of replacing the other one.

This seems to be an issue with using $state.go. I changed the ion-item tags to anchor tags and added ui-sref instead of the function call and it’s working correctly.

You might want to open an issue for this:

Managed to fix it by replacing it with the anchor tag. Thanks

Will open an issue

EDIT: Issue opened

1 Like