State changes lose persistency and ends up throwing innerHTML errors in console

ionic-v1
1

Okay so I have been trying to figure this out. I have an app with abstract parents states and child states.

I have states attached to named views inside each tab:

Abstract “Scaffold”
Abstract “Tabs”
Locations -> Venue Details
Rewards
Messages
Account

Now when I initialize the application all the states work and change as they should. The nav-title is updated as it should. However after a few state changes things start getting messed up. Event though I am using ui-sref on the tabs to change the states the data is wrong. Such as I will be sitting on Account and then switch to Locations but the title says Account. Then ill go to Rewards and the title will switch to Rewards then when trying to go back to Locations it actually takes me to Account. When this starts happening errors start getting thrown that say:
image

We are very close to launching this but we need this fixed or at least know if there is a reason this is happening as well as a solution or reasonable work around?

I noticed on the bottom of the ion-nav-view directive page they have a note to NOT use Angular UI Router’s “resolve” and to process any logic using state change event listeners or load the data when you’ve initialized the controller. I tried removing all of the resolves but this is still happening.

Here is the states:

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider, $locationProvider, $compileProvider) {
            $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|tel|local|data|chrome-extension|fb|twitter|instagram|qrbarcode):/);
            $locationProvider.html5Mode(true);
            $ionicConfigProvider.tabs.position('bottom');
            $ionicConfigProvider.views.maxCache(0);

  $stateProvider
    .state('scaffold', {
        abstract        : true, 
        cache           : false,
        templateUrl       : '/themes/default/ng/scaffold.html',
        controller      : "AppCtrl"
    })
    .state("tabs", {
        url             : "/user",
        parent          : "scaffold",
        cache           : false,
        abstract        : true,
        templateUrl     : "/themes/default/ng/tabs.html"
    })
    .state("home", {
        url         : "/home",
        parent      : "tabs",
        cache           : false,
        views       : {
            "venue-list" : {
                templateUrl : "/themes/default/ng/venue-list.html"
            }
        }      
    })
    .state("home.venue", {
        url             : "/venue/:venueId",
        cache           : false,
        views           : {
        "venue-list@tabs" : {
                templateUrl     : "/themes/default/ng/venue.html",
                controller      : "VenueCtl",
            }    
        }
    })
    .state("home.rewards", {
        url             : "/rewards",
        cache           : false,
        views           : {
            "rewards@tabs" : {
                templateUrl     : "/themes/default/ng/rewards.html",
                controller      : "RewardsCtl",
            }
        }
    })
    .state("home.account", {
        url             : "/account",
        cache           : false,
        views           : {
            "account@tabs" : {
                templateUrl     : "/themes/default/ng/account.html",
                controller      : "AccountCtl",
            }
        }
    })
    .state("home.messages", {
        url             : "/messages",
        cache           : false,
        views           : {
            "messages@tabs" : {
                templateUrl     : "/themes/default/ng/messages.html",
                controller      : "MessagesCtl"
            }
        }
    })
[...more states...]

Here are the Tabs:

<ion-view>
 <ion-tabs class='tabs-positive tabs-bottom' >
      <ion-tab title="Locations"  href="/user/home">
            <ion-nav-view name="venue-list"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Rewards"  badge="redeemableRewards" badge-style="badge-energized" href="/user/home/rewards"   ng-if="user_in">
          <ion-nav-view name="rewards"></ion-nav-view>
      </ion-tab>


      <ion-tab title="Messages"  badge-style="badge-energized" href="/user/home/messages" ng-if="user_in">
          <ion-nav-view name="messages"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Account"   href="/user/home/account" ng-if="user_in">
          <ion-nav-view name="account"></ion-nav-view>
      </ion-tab>
  </ion-tabs>
</ion-view>

Please help if you can! Also let me know if there’s any further information you need from me to better explain why this is happening!

Thanks

Austin

2

Can anyone help? Really need some assistance on this.