Navigation animation breaks when placing list inside pane

ionic-v1
1 
<side-menus>
	<pane side-menu-content>
		<nav-bar
			class="nav-title-slide-ios7"
			type="bar-positive"
			back-button-type="button-icon"
			back-button-icon="icon ion-arrow-left-c">
		</nav-bar>
		<ng-view></ng-view>
	</pane>
	<side-menu side="right">
		<header class="bar bar-header bar-assertive">
			<h1 class="title">Menu</h1>
		</header>
		<content has-header="true" scroll="false">
			<ul class="list">
				<link-item href="#" type="item">
					Login
				</link-item>
				<link-item href="#" type="item">
					Shopping Cart
					<span class="badge badge-assertive">0</span>
				</link-item>
			</ul>
		</content>
	</side-menu>
</side-menus>

List inside ng-view is being loaded well but when clicking the slide animation doesn’t work, if I remove the side-menus code and replace it with just the ng-view the animation works.

Is this the correct way to display side menus with navigation views?

Bernard.

2

Hey @BernardGatt. I’m afraid I’m a little unsure what the issue is in this case. So, you’ve got your <ng-view>. When you load content in there, you’re saying you can’t drag open the slide menu? or are you triggering an event to toggle it open?

Any more code you could share? Thanks!

3

Hey Max,

Thanks for the reply.

Let me explain a bit more:

I have a list loading multiple link-items inside the ng-view, the list itself works fine, it scrolls smoothly etc.
The navigation bar has a side menu on the right which opens smoothly and has drag events.
The issue happens when clicking on of the link-items inside the list, the ng-view just loads the new content without showing the “sliding to the left” animation.

Please note i’m using the latest version ionic.

This is what i’m loading inside the ng-view:

List:

<nav-page ng-controller="AppCtrl" title="title" left-buttons="leftButtons" right-buttons="rightButtons">
  <content has-header="true">
	<list>
	    <link-item ng-repeat="object in objects" href="#/details/{{object.id}}" type="item-link">
	      {{ object.name }}
	    </link-item>
	</list>
  </content>
</nav-page>

2nd Screen:

<nav-page title="title">
  <content has-header="true">
    <h1>Title</h1>
  </content>
</nav-page>

Thanks for your help.

Bernard.

4

Hey @BernardGatt,

You will need to use a nav-router somewhere in order to process the routing. As for using it in the controller like this, maybe add another container here:

<pane side-menu-content>
  <div nav-router>
     <nav-bar
			class="nav-title-slide-ios7"
			type="bar-positive"
			back-button-type="button-icon"
			back-button-icon="icon ion-arrow-left-c">
     </nav-bar>
     <ng-view></ng-view>

Hope that helps!

5

Hey Max,

Thanks for the reply.

To fix that issue I had to remove

nav-router animation="slide-left-right"

from the <body> tag, and add it inside the side-menus, as follow.

<side-menus>
<pane side-menu-content>
  <div nav-router animation="slide-left-right">
     <nav-bar
		class="nav-title-slide-ios7"
		type="bar-positive"
		back-button-type="button-icon"
		back-button-icon="icon ion-arrow-left-c">
    </nav-bar>
    <ng-view></ng-view>

Thanks for your help!

1 Like