CODEWITHSUNDEEP
angularjsionic-framework
Tyler Murry
Tyler Murry

Reputation: 2815

Ionic tab badge value not updating properly

This could be a misunderstanding of how Angular controllers work, but I am trying to understand why the badge values for my tabs are not being updated.

I have isolated the issue to a Codepen here: https://codepen.io/tyman7/pen/JKKEbO

Extract from HTML:

<ion-tab title="Home" icon="ion-home" href="#/tab/home" badge="badgeValue" ng-controller="HomeTabCtrl">
    <ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>

Extract from JS:

.controller('HomeTabCtrl', function($scope)
{      
  $scope.badgeValue = 1;

  $scope.updateTabValue = function()
  {
      $scope.badgeValue += 1;
  }
}

I ended up finding a solution that involves creating another controller that the badge value looks at. I have modified the isolated Codepen slighty to demonstrate: https://codepen.io/tyman7/pen/pbbRpb

Extract from HTML:

<ion-tab title="Home" icon="ion-home" href="#/tab/home" badge="badgeValue" ng-controller="HomeCtrl">
    <ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>

Extract from JS:

.controller('HomeTabCtrl', function($scope)
{

})
.controller('HomeCtrl', function($scope)
{      
    $scope.badgeValue = 1;

    $scope.updateTabValue = function()
    {
        $scope.badgeValue += 1;
    }
}

The thing is, I just don't understand why it needs to be done this way. What fundamental knowledge am I missing here?

Upvotes: 1

Views: 466

Answers (1)

Raymond Smith
Raymond Smith

Reputation: 21

You had multiple instances of the HomeTabCtrl. It created one when the 'tabs' state was entered and another when the 'tabs.home' state was entered. Your 'tab' badgeValue was in one instance and the 'tabs.home' value another. An Easy fix to the original is to change the name of the 'tabs.home' controller to 'HomeCtrl' instead and create an empty controller of that name. Then the updateTabValue will be called in the parent scope and update the badgeValue throughout.

Here is a codepen:
http://codepen.io/stich12/pen/Nrrprd

Upvotes: 2

Related Questions