Redraw tab badges on variable change?

Hello, guys!

How can i redraw tab badge on scope variable change?
For exampe, i’ve got sync, that downloads list of items, and i’d like to render the amont of new items.


I added the variable that holds the badge content to my service. Then I created a controller especially for the tab and added a watch to the service variable. It is not the most elegant solution, but it works.

Can you make an example on codepen? If it’s possible it will really help me.
Thank you!

I’ve tried everything — can’t find any working solution :frowning:

You “should” be able to do them as in this example. However, only hard-coded badges (with numbers) are working. You should be able to put expressions in there too.

I’ve opened Issue # 1103 :

The problem is that the HomeTabCtrl’s scope is underneath the ion-tab itself.

If we put the badges on a controller above the tabs (eg on the body), it will work. You could also put the ng-controller onto the ion-tab itself.

1 Like

Thanks Andy. I overlooked that little nuance.

I’ve figured out how to make it :smile:

Also found a workaround is to use $rootScope to set the badge counters, although I am assuming that this would be going against some ‘best practice’ rules?

I used the same idea by using $scope.badges from the TabsCtrl. In the child controller, I updated the badge counter by using calling $scope.$parent.badges.

1 Like