Ion-tabs using ui-sref or ng-href


#1

Hello, I am working on a mobile application. Currently, I have three tabs and child views in the Home tab. The home tab itself is abstract, while the children show the user’s emotions based on some back-end calculations. However, once the application initializes, the home tab is stuck on the emotion it began with. So if I were to refresh the home page and user emotion changed from sad to happy, then switch to another tab and then switch back to home, it would still show the sad child view.

I tried changing the link for the ion-tab to bind with a controller that provides the emotion, but to no avail. I am wondering if it is possible to have the application specify which child view should be loaded every time the tab is clicked?

Thanks so much!

Here is some code if it’s any help:

<script id="tabs.html" type="text/ng-template">
        <ion-tabs class="tabs-stable tabs-icon-top">
            <ion-tab title="Home" icon-on="ion-ios7-home" icon-off="ion-ios7-home-outline" ui-sref="tabs.home.{{mood}}">
            <ion-nav-view name="home-tab"></ion-nav-view>
            </ion-tab>

            <ion-tab title="Profile" icon-on="ion-ios7-person" icon-off="ion-ios7-person-outline" href="#/tab/profile">
            <ion-nav-view name="profile-tab"></ion-nav-view>
            </ion-tab>

            <ion-tab title="More" icon-on="ion-ios7-settings-strong" icon-off="ion-ios7-settings" href="#/tab/more">
            <ion-nav-view name="more-tab"></ion-nav-view>
            </ion-tab>
        </ion-tabs>
    </script>

And my states declaration

.state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "tabs.html",
      controller: "HomeCtrl"
    })
    .state('tabs.home', {
        url: "/home",
        abstract: true,
        views: {
            'home-tab': {
                templateUrl: "home.html",
                controller: 'HomeCtrl',
            }
        }
    })
    .state('tabs.home.happy', {
        url: "/happy",
        views: {
            'mood': {
                templateUrl: "happy.html"
            },
            'rec': {
                templateUrl: "rec.html",
                controller: 'RecCtrl'
            }
        }
    })
    .state('tabs.home.sad', {
        url: "/sad",
        views: {
            'mood': {
                templateUrl: "sad.html"
            },
            'rec': {
                templateUrl: "rec.html",
                controller: 'RecCtrl'
            }
        }
    })

#2

Can you please put this into a codepen or plunker?