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

ionic-v1
294

@adam - thanks for the response. I’ve actually “solved” my problem by going with a modal as the “interstitial” between my app’s home screen and the main content.

Here’s my old scenario:

A single account can have multiple users. So, I use HTTP interceptors to make sure the account is actually authenticated.

However, each user in the account has a “secret pin”. Before they are allowed into their content, I need to have them enter their secret pin and make sure it was valid. So, on the home screen, they would tap their icon. They’d navigate to a secret pin screen, enter their PIN and then go into their personal views.

If they went “back”, I did not want them at the home screen again. Instead, I wanted “Back” to take them to the home screen. So, I was using setNavViews to replace the secret pin state with the home state.

LOL - Apparently, it was more of a hack than even I imagined, but it was quite useful.

Suggestions for a different implementation. Maybe Ionic could have a “don’t add this state to the history stack” option like:

$ionicHistory.nextViewOptions({
    includeInHistoryStack: false
});
295

With the current nightly, the ionicPopup doesn’t look that nice anymore. Especially when the popup is closed again, the animation doesn’t look that good and it just get’s removed after the backdrop has faded out. With beta 13 the hiding looked a lot better.

beta 13 - smooth show and hide transitions:

current nightly - when closing, the backdrop fades out and the popup get’s removed without transition:

296

@Calendee Awesome idea about not allowing a view to be added to the history stack, I really like that! I suppose it could be done two ways:

By view attribute:

<ion-view history-push="false">...</ion-view>

Or by state provider:

.state('my-state', {
  historyPush: false,
  url : '/my-url',
  templateUrl: 'my-template.html'
})

What do you think of history push? I’m trying to relate it to adding the view to the history, which is literally pushing the view to the history array. The default would always be true. Any ideas what it should be called? Thanks

297

Hi Mharington, thanks for that.

Is there any git i can check that has ios specific animation for android with the latest version somewhere?

298

historyPush works for me.

299

How can I remove a cached view from the cache and reload it again? I have a chart view based on Chart.js API and another view containing the data source. After changing the data source and going back to the chart view the chart isn’t updated. So my idea is to remove the chart view from the cache and reload it.

300

@BAHbKA Are you able to not cache the view, so you don’t have to remove it from the cache then reload it, but instead, just always reload it?

301

Using the latest nightly 811, the collection-repeat issues with cached views are fixed in my app.

302

@flavordaaave thanks for the codepens! You’re right, there was an animation that was accidentally removed. It’s been fixed as of build 813. Thanks again for the code examples!

303

@Calendee @anemitoff I made a few updates to ensure the correct title is used at various times in the view’s transition lifecycle, as of build 814. If you take a look at the AnotherTitleCtrl controller in this example, each of the ways to update the title should now work (but I don’t recommend using timeouts that would fire the title update in the middle of a transition).

With your example, there are still cases where using a timeout, between specific milliseconds during the transition, may still not update correctly. However, I’d recommend updating the title using either $ionicView.beforeEnter or $ionicView.afterEnter from now on.

Use $ionicView.beforeEnter in most cases, and if the title isn’t know at this point, then at least wait to update the title after the transition has finished.

<ion-view view-title="{{ title }}">...</ion-view>

$scope.$on('$ionicView.beforeEnter', function(){
  $scope.title = 'Before Enter Title!';
});
304

I’ve noticed that there is no animation for popup and popover dialogs anymore. Testing the nightly build 800 on a Nexus 5 Android 4.4.4.

305

@BAHbKA Fixed as of build 813, thanks

306

Thanks so much Adam.

Use $ionicView.beforeEnter in most cases, and if the title
isn’t know at this point, then at least wait to update the title after
the transition has finished.

So, just to confirm, the method to wait until after the transition is to do it in the afterEnter event, right?

307

@siddharta could you try again with latest nightly?

308

Just a note about this Please help test: Angular 1.3, improved transitions, cached views, etc

If you open this or this codepen, and do this steps.

  1. Scroll to item 20
  2. Then click in an item
  3. Then click in “More facts”
  4. Then click in “Home” (in the left of “Scientific facts” button)
  5. Check that the “Home” view was rendered with the same scroll position that you left in step one.
  6. Now, click and back button three times to render the home screen again
  7. Check that now, the scroll position was reseted to zero.

I’m not sure if it is a bug or a feature or anything, I’m just sharing this behaviour.

309

@Calendee Yes, the $ionicView.afterEnter event is fired after the entering view has completed its transition, and has become the active view.

311

I have some strange things happening with the back/menu button.

Open this codepen and then:

  1. Minimize the browser width so that the sidemenu isn’t exposed
  2. Click on “Page 2”
  3. You should see the back button
  4. Click the back button (or home button) so you’re on the home screen
  5. Open the menu and click on “Search Schedules”
  6. Click on “Page 2” again and the back button should be hidden.

Clicking back and forth between these buttons and the link in the sidemenu seems to randomly show/hide the back/menu button.

312

$ionicHistory.clearCache() is not removing all cached views.

For example, I navigate from the state 1 to 2, then from 2 to 3, and in the state 3 I clear the cache, but the state 2 still cached. When I clear the cache, I want all the views to be removed, and if a tab the back button, the previous view should be completely rebuild.

Steps to reproduce:

  1. Open this codepen
  2. Open DevTools (COMMAND+OPTION+I) and watch the logs
  3. Observe there’s a views: 1 log, this is the ion-view count and logs for the $ionicView.loaded event.
  4. Click in any list item, views: 2 (correct)
  5. Click in “More Facts”, before clear cache, views: 3(expected), after clear cache views: 2 (unexpected) (shouldn’t be 1?)
  6. Click in back button, the current views was cached.
  7. Click in back button, the home screen was loaded again.

With tabs

  1. Navigate to the tabs and watch the views log, it will increase to 3,
  2. Navigate to Home, it will log views: 4,
  3. Click in any item, then click in “More Facts”
  4. After clear cache, it still logging 4 ion-view elements, should be only the current view.

I’m not sure if I was clear explaining the error, I hope it help debugging.

313

@brandyshea Thanks for the codepen! As of build 815, any nextViewOptions set by menuClose will expire. So in your example, the user wasn’t clicking an actual link to navigate to another view, but the menuClose directive was still setting options for the next view that registers (causing the issues). This should be fixed now, thanks for creating the example and describing how to replicate the issue!

314

@adam Thanks for the quick reply! I have upgraded my app to nightly build 817 and tested on the above codepen but I am still seeing this issue on both. I checked your commit on Github and saw that an “expire” was added to the directive, but it isn’t in build 817. I’m not sure how it gets into the nightly so I wanted to let you know. Thanks again! :smile: