Side Menu not loading views

ionic-v1
1

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-view>
<ion-side-menus>
    <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-pane>
    
    <ion-side-menu side="left">
        <ion-header-bar align-title="center" class="disable-user-behavior bar-dark">
            <h1 class="title">Features</h1>
        </ion-header-bar>
        
        <ion-content class="ionContentOfFeature blackBackground">
            <ion-list>
                <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>
                        {{tabs[0].displayName}}
                    <i ng-class="tabs[0].iconElement"></i>
                </ion-item>
                <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>
                        {{tabs[1].displayName}}
                    <i ng-class="tabs[1].iconElement"></i>
                </ion-item>
                <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>
                        {{tabs[2].displayName}}
                    <i ng-class="tabs[2].iconElement"></i>
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

My Tab Module is the following

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

.....

$urlRouterProvider.otherwise('/tab/gallery');

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
2

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: http://codepen.io/brandyshea/pen/qEwrqo/

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>
    {{tab.displayName}}
    <i ng-class="tab.iconElement"></i>
</ion-item>
3

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

Hack: https://github.com/calendee/ionic/commit/b91983995325d6d3704fccec2fae65b4cc886347

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

4

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($attr.name);
        $element.html('<ion-nav-view name="' + dynamicName + '"></ion-nav-view>');
        $compile($element.contents())(scope);
    }
};
});

https://github.com/driftyco/ionic/pull/1526 , check brianfoody post

5

Another issue with the side menu navigation

http://codepen.io/canihazcookienow/pen/rabJKo

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.

image
Screen Shot 2015-04-02 at 10.47.25.png1440×900 224 KB

6

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: https://github.com/driftyco/ionic/issues

7

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

Will open an issue

EDIT: Issue opened https://github.com/driftyco/ionic/issues/3461

1 Like