Black part between views transition


#1

Hello,

I’ve got a black part between some views transition in my app ; here is a screen : http://img11.hostingpics.net/pics/574295blackpart.png

It appear since I nested my views and only between x nested views to x + 1 nested views.
In my case it’s between sidemenu.home and visits.xxx.xxx

Here is my routes :

/* SIDEMENU */
.state('sidemenu', {
	url: 		'/sidemenu',
 	abstract: 	true,
	templateUrl: 	'js/features/sideMenu/sideMenu.view.html',
	controller: 	'sideMenuController as sideMenu'
})
.state('sidemenu.home', {
	url: 		'/home/{searchId:int}',
  	views: {
  		'menuContent': {
  			templateUrl: 	'js/features/sideMenu/home.view.html',
			controller: 	'sideMenuHomeController as home',
  		}
  	}
})

/* VISITS */
.state('visits', {
	url: '/visits',
	abstract: true,
	template: '<ion-nav-view></ion-nav-view>'
})
.state('visits.calendar', {
	url: '/calendar',
	abstract: true,
	template: '<ion-nav-view></ion-nav-view>'
})
.state('visits.started', {
	url: '/started',
	abstract: true,
	template: '<ion-nav-view></ion-nav-view>'
})
/* VISITS CALENDAR */
.state('visits.calendar.edit', {
	url: 		'/edit/{searchId:int}/{visitId:[0-9]*}',
	cache: 		false,
	templateUrl: 	'js/features/visits/calendar/edit.view.html',
	controller: 	'visitsCalendarEditController as edit'
})
.state('visits.calendar.show', {
	url: 		'/show/{searchId:int}/{visitId:int}',
	templateUrl: 	'js/features/visits/calendar/show.view.html',
	controller: 	'visitsCalendarShowController as show'
})
/* VISITS STARTED */
.state('visits.started.add', {
	url: 		'/add/{searchId:int}',
	cache: 		false,
	templateUrl: 	'js/features/visits/started/add.view.html',
	controller: 	'visitsStartedAddController as add'
})
.state('visits.started.edit', {
	url: 			'/edit/{searchId:int}/{visitId:int}',
	templateUrl: 	'js/features/visits/started/edit.view.html',
	controller: 	'visitsStartedEditController as edit'
})
.state('visits.started.show', {
	url: 			'/show/{searchId:int}/{visitId:int}',
	templateUrl: 	'js/features/visits/started/show.view.html',
	controller: 	'visitsStartedShowController as show'
})

And my index.html :

<body>
    <ion-nav-bar class="bar-light" ng-class="{'hide-bar': changeColor}"></ion-nav-bar>

    <ion-nav-view></ion-nav-view>
</body>

Thank you !


#2

Problem solved after hours of tests !

Each ion-nav-view have animation, in my case I had three nested views so each animation started with a few seconds of differences which create the black part.

To solve it I named my main ion-nav-view “appContent” and put all my ion-view inside. So now I keep the logic of nested views but in the fact all my views go into “appContent”.

Code :

<body>
    <ion-nav-bar class="bar-light"></ion-nav-bar>

    <ion-nav-view name="appContent"></ion-nav-view>
</body>



/* INTRO */
.state('intro', {
	url: 			'/intro',
	abstract: 		true,
})
.state('intro.home', {
	url: 			'/home',
	views: {
		"appContent@": {
			templateUrl: 	'js/features/intro/home.view.html',
			controller: 	'introHomeController as home'
		},
	}
})