Please help test: Angular 1.3, improved transitions, cached views, etc

ionic-v1
169

@willadamskeane would you be able to create a codepen and describe exactly how to replicate this issue? Thanks

170

Is anyone having trouble with nav-view="leaving" getting stuck in the DOM and never actually leaving? @adam

Here’s a screenshot of the issue. Notice there is the entering view and the leaving view. But leaving view never leaves and the entering view never goes ‘active’. This only happens when I change ‘Top-Level-States’ and not nested states.

171

sjerd
Thank you very much, I start to understand the changes in new ionic.!!

172

You can also use align-title=“center” on the nav-bar. I just learned the hard way that this overrides the platform alignment.

<ion-nav-bar align-title="center" class="bar-balanced"></ion-nav-bar>
173

@brandyshea Yes, using the attribute is specific to an individual view, which is why it overrides the global setting.

1 Like
174

@Hendrixer Would you be able to create a codepen and describe exactly how to replicate the issue? What type of view are you navigating to? Is the next view a sidemen or tabs?

I’ll start looking into this more, because you’re right, those should only be there during the transition, and when they’re done the “entering” should become “active” and the “leaving” should become “cached”. Thanks

175

Here you go @adam http://codepen.io/hendrixer/pen/dPPWrG
This codepen replicates the issue I’m having with the leaving view not getting cached,
and the entering view not becoming active. I’m not using sidenav or tabs. Open up the DOM and you can see it. This actually prevents functionality on the entering view, it is unresponsive on my app, once I remove the leaving view, it works again.

176

@adam is there a method, to tell the framework, to rerender the views?
need something like this for multilanguage (don’t like reloading the complete app).

Also facing the same problem as @Calendee “the scroll view is often not big enough now”
( Please help test: Angular 1.3, improved transitions, cached views, etc )
and still the overlapping problem in collection-repeat when opening a modal.
( Please help test: Angular 1.3, improved transitions, cached views, etc )

then is is possible to open a view on a different tab with animation now?
like tab1.view1 -> tab2.view2 (tabs are hidden on this views and it looks strange when there is no animation.)

1 Like
177

@auto You could do $window.location.reload(). That will reload the entire in the view.

Not sure it’s the best approach, but it would work. Why do you need this for multilanguage? Letting the user switch languages on the fly?

178

exactly in 1.3 it works fine without a problem.

i actually don’t trust phonegap (on my phone globalization did not work iphone swiss german - i got english back)/ plugin to determine the language correctly with there special currency etc…
so i want to have the option to change it.

It looks way better when the language changes on the fly then reloading the page.

$window.location.reload() does the same as location.reload()?

179

Yes $window.location.reload() is same as location.reload(). However, Angular suggests injecting $window and using it for testing and mocking.

https://docs.angularjs.org/api/ng/service/$window?escaped_fragment=

180

@adam is there a method, to tell the framework, to rerender the views?
need something like this for multilanguage (don’t like reloading the complete app).

I’ve been wondering this to. $window.location.reload() is fine but it feels a bit overkill reloading the whole app if I could just reload the controller view.

181

First of all, nice job going towards the cached views for a SPA, this brings a whole new level of power to apps perceived-performance-wise, although that will require a huge change in how we bind data in controllers.

Using nigthly.770, and so far:

  • $ionicSlideBoxDelegate.{next(),previous()} don’t work. Tried with $getByHandle too, nothing changes.

  • I brought my slideBox to be almost identical to the one at codepenš, and it still doesn’t work (doesn’t slide with touch events, and nor does it work through the delegate). I was able to make it ‘work’ once using a ion-content with scroll="true" but performance was bad for some reason and it messes up some of my styling. [1] {simple ion-view inside a global ion-nav-view}, {no ion-content nor ion-scroll}, {no custom CSS that affects positioning or behaviour, only presentation}.

  • hide-nav-bar in a ion-modal-view doesn’t seem to work properly when there is a nav-bar from a cached view behind: the underlying nav-bar is visible up on the stack. Even when all caching is disabled with $ionicConfigProvider.views.maxCache(0);

  • I still can’t see the side-menus with a swipe gesture, even after the many fixes towards this issue that came in the last few days. I need to open the menu using the delegate or menu-toggle. Disclosure: I use overflow-scroll="true".

  • Probably related to Ctrl caching: I set up backButton handlers using $ionicPlatform.registerBackButtonAction($scope.handleBackButton, TIPPZ_BACK_BUTTON_PRIORITY_VIEW);, and that $scope.handleBackButton function checks for a dynamic function specified by each view. In my /home state, it’s using navigator.app && navigator.app.exitApp && navigator.app.exitApp();, and in pretty much every other view it’s using $ionicHistory.goBack(); or a direct $state.go('anotherState');. However, some deep views in my app now still calls the root callback, which makes the app exit when it should go back. My guess is that the registerBackButtonAction is being affected somehow. I haven’t taken a deeper look into this yet, might find something lurking around.

  • I may be wrong or have too many stuff interfering with the view, but I felt like scrolling performance using overflow-scroll="true" has been affected and it’s not native-like anymore. Maybe it’s time I won’t have a chance anymore but to switch to js scrolling?

  • Some view transitions happen too fast and the animation isn’t visible or noticeable. Disclosure: I’m using animation="slide-left-right" on my all-father ion-nav-view. Still can’t reproduce or point fingers on anything for this one…

  • If I have a <ion-view view-title="Parent Title"> and an inner view <ion-view view-title="Inner Title">, the Inner Title flashes and turns into Parent Title, as the parent takes place. The priority should be the other way around, I guess (inner overrides outer).

  • Outside my state views, on my index.html, I have an empty shell provided by the following code, for UX reasons. On previous ionic versions, by the time the $state service is ready and working, it’ll replace the content at this root ion-nav-view with the view of the active state, and thus the empty shell is no more. On nightly.770 however, both the shell header and pane are alive on html as cached views, even though I disabled all caching on my app. Furthermore, the header is visible on top of the current view’s nav-bar as if it had the maximum z-index available for headers, and thus I cannot interact with the nav-buttons underneath. This one may be on UIRouter, but I guess it won’t hurt to try and see if Ionic has anything to do with this change.

<!--MAIN CONTENT-->
	<ion-nav-view>
		<div class="bar bar-header bar-dark">
			<button class="button button-icon button-clear ion-navicon"></button>
			<h1 class="title">Tippz</h1>
		</div>
		<div class="pane"></div>
	</ion-nav-view>
182

Testing the following ion-tabs example codepen that uses the nightlys on Android 4.4.4 (Galaxy Note 3), in the default Android browser, the tab bar appears at the top of the page and if you click “Scientific Facts”, the tab bar completely disappears.

It works fine in Chrome on desktop. I also tested it with the non-nightly1.0.0-beta.13 files and it does not have that problem.

183

@fredericogalvao

@andy is currently address all of the slidebox issues, he’ll get back to you on this

I may be wrong or have too many stuff interfering with the view, but I felt like scrolling performance using overflow-scroll=“true” has been affected and it’s not native-like anymore.

Please provide an example of this showing the differences between beta13 and beta14 performance.

In my /home state, it’s using navigator.app && navigator.app.exitApp && navigator.app.exitApp();, and in pretty much every other view it’s using $ionicHistory.goBack(); or a direct $state.go(‘anotherState’);

So every scope has it’s own handleBackButton? Ionic should be handling this all for you. Could you provide some code on how you have this working?

Some view transitions happen too fast and the animation isn’t visible or noticeable. Disclosure: I’m using animation=“slide-left-right” on my all-father ion-nav-view. Still can’t reproduce or point fingers on anything for this one

The animation attribute is no longer used, please see the initial post. Are the animations happening too fast on iOS or Android? Could you provide an example?

If I have a <ion-view view-title="Parent Title"> and an inner view <ion-view view-title="Inner Title">, the Inner Title flashes and turns into Parent Title, as the parent takes place. The priority should be the other way around, I guess (inner overrides outer).

You’re saying you have an <ion-view> directly inside of an <ion-view>? Could you provide an example of your markup? If I’m understanding it correctly, what’s the reasoning for putting a ionView directing inside an ionView?

I really appreciate all the info, but for me to fix any bugs I need to see some examples replicating the issue, otherwise I’m not sure how you’re structuring your app and where to start, or if I’m even testing what you’re describing. Thanks.

184

@ronaldjeremy Having the tabs covered on the second view inside the same tab is by design, as this is how Android L does it.

185

@Hendrixer Build 773 should have the fix in place so the “leaving” and “entering” values are updating in the nav-view attribute. Thanks

186

Is there a way to configure the transition of the nav-bar separately from the transition of the view? I want to have the standard transition in the nav-bar while having none on the view.

188

I see – so now its just you have to explicitly do $ionicConfigProvider.tabs.position(“ios”) if you want to maintain consistency between platforms. Thanks!

189

Thanks @adam, works like a charm!