Side Menu + nested view

ionic-v1
1

Hi,

I’m using the side menu and it works great. I can use the ng-view stuff to update content.
But this menu is a little bit complicated because it is composed from many lists.

ex:
If you open it for the first time, you will see a list of countries. You select one, and it changes to display a list of cities. And only now the click on a city item will update the main content.

To sum up:

  • 1 for the main content: managed by ng-view
  • 1 view for menu: managed by ??

I looked at ui-router, but before using it, I was wondering when you implemented Ionic what did you have in mind for this kind of problematic.

Thanks.

2

Hey @nicolasca. I’m not entirely sure what you mean yet. Do you have any example code to share?

If you just need to change the list content, you could try using a filter or changing the scope variable populating the ng-repeat on the list.

I just need more info to help.

3

Yes sorry it was not enough clear.
I’d like to have multiple views, that could behave separately. That’s why I talked about ui-router, but I wanted to know if it would be compatible or not.
I just tried ui-router with Ionic, but a very strange bug appears.

Here is the app.js:

$stateProvider
            // Login page
            .state('login', {
                url: '/login',
                views: {
                    "mainContent": {templateUrl: 'login/login.tpl.html',
                        controller: 'LoginController'}
                }

            })

         // When connected
            .state('dashboard', {
                url: '/dashboard',
                views: {
                    "mainContent": {templateUrl: 'dashboard/dashboard.tpl.html'},
                    "sideMenu": {templateUrl: 'navigationPanel/accounts.tpl.html'}
                }

            })
        ;

The index.html, to define the two views: mainContent and sideMenu

 <side-menus>
        <!-- Center content -->
        <pane side-menu-content>
            <div ui-view="mainContent"></div>
        </pane>

        <!-- Left menu -->
        <side-menu side="left">
            <div ui-view="sideMenu"></div>
        </side-menu>
    </side-menus>

And here is the login page:

Template

<div class="list">
    <label class="item item-input">
        <input type="text" name="login" placeholder="username" ng-model="user.login"/>
    </label>
    <label class="item item-input">
        <input type="password" name="password" placeholder="password" ng-model="user.password"/>
    </label>
</div>

<button class="button button-block button-primary" ng-click="login()">Login</button>

The controller

$scope.user = {};

$scope.login = function() {
       blalabla...
 }

So what is happening? It took me 1h to understand it :smile:

At first, the bindings user.login and login.password acts very strangely. When I type (push a character with keyboard), only the last letter typed populate the $scope.user.login and $scope.user.password (checked with Batarang). And the input is left empty. I thought about a conflict between Ionic scope and mine.

BUT, if I open the side menu, and then i close it, NOW the binding is working. I have no clue what’s going on.

I hope you could reproduce it.

1 Like
4

Hi. Just a thought but pretty sure ui-router still has some issues with angular 1.2.x
May not be ionic issue at all.

Cheers
Darren