Side Menu Example Update Content Pane?

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? (

1 Like

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

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

Then in the content area, using ng-view:


You’ll need to set up some routes using ngRoute, you can see the seed project for an example:

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

That help?

Absolutely. Thanks! I’ll try that.

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?

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

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


 <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

Glad you got it working :slight_smile: The nav-router system should automatically update the header bar, like in this example:

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