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

Yes, but how to avoid two reloads …if the page was not already cached firstly?

I would imagine this pseudo-code: on-select=“myState.reload()”.
If the targeted view was not already cached, may it end up to load the view twice?

Or is there a better way to force a reload ?

The on-select event doesn’t do anything with the view. it just gives you an opportunity to run some method on your controller. So, it won’t cause the view to load twice.

So, your controller might look like this:

angular.module('Tab1Controller', function($scope,DataService) {
    
  $scope.customers = [];
  
  // Will load the customers the first time the controller is loaded
  loadCustomers();

  // Use with the on-select event to load refresh data
  $scope.reloadCustomers = function() {
    loadCustomers();
  }

  function loadCustomers() {
    DataService.load('xyz').then(
      function(results) {
       $scope.customers = results;
      }
    )
  }
});

Let’s suppose two tabs Tab0 and Tab1.
At startup, Tab0 is displayed.
When I click on Tab1, your Tab1Controller is executed, loading customers.
But also the on-select event, triggering reloadCustomers ! , loading twice the customers…

Am I wrong?

So then just do this :

angular.module('Tab1Controller', function($scope,DataService) {
    
  $scope.customers = [];
  
  // Use with the on-select event to load refresh data
  $scope.reloadCustomers = function() {
    loadCustomers();
  }

  function loadCustomers() {
    DataService.load('xyz').then(
      function(results) {
       $scope.customers = results;
      }
    )
  }
});

Now, no customers will be loaded until the tab is selected (either by default as the tab view loads or the user chooses that tab).

1 Like

Here is a Plunker with some parts of my app that shows the $ionicSlideBoxDelegate.select() issue.
The slide with index 0 is always shown in the modal. This feature works in b13 using the .slide() method.

But you suppose that Tab1Controller is the direct controller that would do the reload.
Actually, I made a TabsCtrl merely managing some “tabs mechanism”. (state called ‘tabs’ with abstract:true)
And a lot of nested states like tabs.customers, tabs.notifications etc. , corresponding to each particular controller making the logic.
To sum up, TabsCtrl has no knowledge at all about the way to reload a customers.
It’s defined in the corresponding child controller: CustomersCtrl associated to the nested state: tabs.customers.

I don’t find a way to use the on-select directive to target child controllers (nested states), making the needed reloads.

=> I’m still stuck with cached views.
I only need them for the “back” navigation, not the click on tabs supposing to refresh (more UX-oriented).

I’ve come across a somewhat strange issue. I have a directive for wrapping my pages in the appropriate ion-view / ion-content tags. After updating to nightly 782 the title no longer gets set in the header. My template looks like this:

<ion-view view-title="{{viewTitle}}"><ion-content class="has-header padding"><div ng-transclude></div></ion-content></ion-view>

Even when I set the title to plain text it isn’t set. Moving this exact same code into the individual pages works fine. Any thoughts?

@xephorus Can you provide a codepen? Why can you not use just the ion-view directive instead of creating your own?

@JesperWe Thank you for putting together the plunker! It helped me narrow down what the issue was, so the fix is in build 793. Please let me know if you have any other issues and thanks for creating the example and describing the problem.

@jrowny To follow up on your question about using ion-header-bar in an ion-view, is there any reason you needed to use ion-header-bar with the bar-subheader css class over just using a div? Like this:

    <div class="bar bar-subheader">
      <div>My subheader</div>
    </div>

Reason I ask is because we might go back to having ion-header-bar trump the ion-nav-bar when a header bar is supplied in the ion-view. We need a directive that can override the nav-bar with custom header content, and that’s what ion-header-bar is supposed to do. So I just wanted to check with you first to see if there was something I’m missing before adding that code back in. Thanks

@Calendee Great find! There was a point in the code that the entering and leaving scopes were both connected, and at that time was when the $broadcast was fired, so both scopes listened to the event.

I changed it so that the leaving scope gets disconnected BEFORE the entering scope gets reconnected or a new scope is created for the entering view. Thanks for the detailed description of the problem with codepens!

When I switch tabs it does not work. But $ionicView.enter works well

.controller(‘MainCtrl’,function($scope,$rootScope,$ionicPlatform,EventService,$window){
$rootScope.$on(’$ionicView.leave’,function(){
//$rootScope.loadingView = true;
console.log(111);
});
$rootScope.$on(’$ionicView.enter’,function(){
console.log(122);
$rootScope.loadingView = false;
});

});

l have seen https://github.com/driftyco/ionic/commit/fb81f9704f3de56b0a49ed43fefa650d42b2263c and download the lastest version.But it also dont work.

Issues with collection-repeat lists in tabs, possibly caused by cached views.

My app has collection-repeat lists in seperate tab views, when fast switching between tabs, occasionally the list views will not refresh correctly, resulting in only one item left in the list view, all other items gone and unable to refresh the list view.

It’s also possible to always show the problem with the following steps:

  1. Switch to one tab with list views
  2. And then rotate the phone orientation to redraw the list view.
  3. Switch to another tab with list views, now the list views refresh but only one item left (seems to be last item in the list).

Lastest nightly 792 with iOS6 and iOS7, using Sarfari/Chrome browsers and PhoneGap developer.

Dunno if this has already been addressed, or is just a dumb question, but:
if ScrollBox now needs a parent with a defined height, does this makes impossible creating a fullscreen slidebox with infinite scroll lists in each slide?

The solution was so simple !

$scope.$on('$ionicView.enter', function() {
     $ionicScrollDelegate.scrollTop();
     loadOrReloadMyItems();    
});

To avoid to load even when navigation back, my loadOrReloadMyItems() checks whether the instance of angular-cache exists, that would contain the actual scopes values, without need to reload them.

Each click on tab would remove these angular-cache entries:

<ion-tab title="My List" icon="icon ion-eye" href="#/tab/my-list" on-select="removeAllManuallyCachedItems()">

I imagine that Ionic cached view also keep track of the scope values.
If my angular-cache keeps those same references, should the performance be good? Seems I should not waste memory since objects references are shared between cached view and my custom cache.

Note: My custom cache is a way to share values between list page and show page. Like incrementing bids values for example, updating by the show page, impacting the list page when back.

Is it good?

Thanks !

ion-side-menus stops working after upgrade on android device. If I downgrade the ionic version to beta 13, everting works fine, but on nightly, Side Menu stop working.

also have this problem, And the slides on the slidebox only slide to the left so I can only slide back also only on android.

@sjerd @calebeaires @GuMu1234 Would you be able to create a codepen to recreate your issue? It’s difficult for me to guess the various scenarios of how your app is built, but if I’m given the exact code and error I can quickly debug and fix it. Thanks

Here @adam I created a codepen to show what I mean: Side menu won’t open

@sjerd Thanks for creating the codepen, I was able to fix the issue so the correct delegate can be found when within a view that has multiple active parent histories (a view, inside of sidemenu content, inside of sidemenus, inside of a tab, inside of tabs, inside of the root history).

Thanks again for creating the codepen, it made it really easy to see the issue you were having from how you had your app structured, and we were able to add another unit test for this scenario. Thanks!

1 Like