[SOLVED] Title in ion-tab with angular expression

ionic-v1
1

Hi, is it possible somehome to fill title of an ion-tab with angular expression, for example

ion-tab  title="{{Home}}"

as you can see, title below icon is empty, while on navbar,

ion-view title="{{Home}}"

this is correctly set.

2

Yes you can, I do it for an app I’m building my self. Can you provide your markup for how you have the tabs? I suspect that you have the tabs style applied incorrectly. Does it look like this?

<ion-tabs class="tabs-light tabs-icon-top">
    <ion-tab title="{{page.id}}">
<ion-tabs>
3

sure, here’s the markup:

<ion-tabs class="tabs-royal tabs-icon-top">

  <ion-tab  title="{{Home}}" icon-on="icon ion-ios7-camera" icon-off="icon ion-ios7-camera-outline" href="#/tab/home">
    <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>
  
  <ion-tab title="massi" icon-on="icon ion-ios7-gear" icon-off="icon ion-ios7-gear-outline" href="#/tab/settings">
    <ion-nav-view name="tab-settings"></ion-nav-view>
  </ion-tab>

</ion-tabs>

while home view is

<ion-view title="{{Home}}">
	<ion-content class="has-header padding">
		<ion-pane>
			<h1>{{_line1_}}</h1>
			<h4>{{_line2_}}</h4>
		</ion-pane>
	</ion-content>
</ion-view>

ah, last thing, Home is in $rootScope

4

Hmm, are you getting any errors in your console, seems like the correct markup. Would you mind posting a codepen?

5

hell, it works just like a charm on codepen!
Well, it’s just a simplified version of my code (there’s a localization factory in the middle that fills the titles, and I omitted it on codepen)
I’ll find out whats wrong, but i checked, no error on console
Thanks anyway, i keep you updated in case i find something interesting, but 99% it’s something stupid i wrote :wink:

6

Hmm I noticed one thing, you’re missing some quote marks around the abstract statement.

7

corrected. But still no luck: on codepen works fine, but doing

cordova serve android

with same code and markup

does not work

same result doing

ionic run android

and I also checked ionic versions , the stuff I refer via cdn on codepen is 0.9.26, as well as package installed on my machine.

8

Can you update to the 1.0 beta1? There could be some issues with android support with earlier versions of android

9

done. Sadly, still not working :frowning:

10

Damn, thought that would work.

The last thing I can think of is to remove it form the .run(function) and put it in a normal controller.

I got it that way in a codepen and things work fine. I just don’t have an android device on me at the moment for testing.

11

it works!

thank you very much! I still can’t understand what really made the difference: maybe the fact the vars are not valued in the cordova ready event handler! Thank you again

12

Awesome, glad to be able to help :smile:

13

in the meanwhile, I understood what is the problem:

here I forked your codepen, have a look at how i changed TabsCtrl:

.controller(‘TabsCtrl’, function($scope, $timeout){
$scope.Home = ‘Home’;
$scope.Settings = ‘Settings’;
$timeout(function() {
$scope.Home = ‘Hello’;
$scope.Settings = ‘World’;
}, 1000);
})

On android , after 1 second “Home” is not refreshed to “Hello” and “Settings” to “World” on tab titles (everywhere else instead it works): this could be a problem for who, for instance, requests a json and changes values accordingly when response is arrived. Is there a way perhaps to re-render tabs as a workaround?