Side Menu Example Update Content Pane?

ionic-v1
1

It’s probably pretty straightforward, but what’s the best way to use the side menu for navigation and have it update the content pane? (http://ionicframework.com/examples/side-menu/)

1 Like
2

Hey @jprichardson, what you could do is use ngRoute for navigation, then in your side bar, have a list of links like this:

<list>
  <link-item ng-repeat="thing in stuff" href="#/thing/{{thing.id}}">{[thing.name}}</link-item>
</list>

Then in the content area, using ng-view:

<ng-view></ng-view>

You’ll need to set up some routes using ngRoute, you can see the seed project for an example: https://github.com/driftyco/ionic-angular-cordova-seed/blob/master/www/js/app.js

Of course, you could always just manually process ng-click events on the items and then do the navigation yourself.

That help?

3

Absolutely. Thanks! I’ll try that.

4

OK, I’ve done this and it works great! How can I get my new views to update the header title though? The header only updates when I use modals, presumably that’s because it’s an overlay? But when I update the url via the side menu which causes the router to show the new view, the header doesn’t update. And if I add a header in the template, it’s just placed under the current header.

Hopefully that makes sense?

5

I wasn’t thinking in Angular… when I started to, it clicked immediately. Essentially, I just changed:

 <h1 class="title">Slide Me (left?)</h1>

to

 <h1 class="title">{{title}}</h1>

In my menu ng-click attribute, I pass in $index to my close function. I then have the index of the $scope.list to use and hence can update the title. Easy peasy.

1 Like
6

Glad you got it working :slight_smile: The nav-router system should automatically update the header bar, like in this example: http://ionicframework.com/examples/nav/

But you can always update it yourself, as you’ve found :smile: