Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ion-tab directive should support scope variable binding #646

Closed
gregaton opened this issue Feb 20, 2014 · 9 comments
Closed

ion-tab directive should support scope variable binding #646

gregaton opened this issue Feb 20, 2014 · 9 comments

Comments

@gregaton
Copy link

The ion-tab directive currently does not support the binding of scope variables to it's attributes.

For instance to set the title from a scope variable tabTitle one can do

<ion-tab title="{{tabTitle}}" ...

but not

<ion-tab title="tabTitle" ...

This means the tab title will always be set to a fixed value and any later changes of tabTitle will not update the title attribute of the tab.

As far as I can tell this is true for all attributes of the ion-tab directive.

@ajoslin
Copy link
Contributor

ajoslin commented Feb 25, 2014

Supported as of nightly and 0.9.26+

@ajoslin ajoslin closed this as completed Feb 25, 2014
ajoslin added a commit that referenced this issue Feb 25, 2014
Closes #597. Fixes #634. Fixes #334. Fixes #175. Fixes #646. Closes #647.
@gregaton
Copy link
Author

gregaton commented Mar 5, 2014

It looks like this still doesn't work.
Let me reference the plunker from a different issue.
http://plnkr.co/edit/928wciFp8hmRrOTtlEYP?p=preview

The tab title reads "tab.title" but it should be "Flask" or "Clipboard". It would work fine with the {{}} syntax.

@ajoslin
Copy link
Contributor

ajoslin commented Mar 6, 2014

Titles are interpolated, not bound. This will be a lot clearer once we have docs up (and make sure all our titles follow the same conventions!)

Try this: <ion-tab title="{{tab.title}}"></ion-tab>

@gregaton
Copy link
Author

gregaton commented Mar 6, 2014

Sorry, I'm not sure what you mean by "interpolated, not bound".

What I would have liked to see is a way to dynamically change the title, icon etc for a tab.
My tabs are dynamically generated from a scope variable and I had hoped that if I change the variable it would update the tab.
Just like it works with all the angular core directives.

If that's not possible / too costly I'm going to try and figure out a workaround.

@ajoslin
Copy link
Contributor

ajoslin commented Mar 6, 2014

This will work: <ion-tab title="{{tab.title}}"></ion-tab>

@gregaton
Copy link
Author

gregaton commented Mar 6, 2014

Thank you Andy, I understand that.

Maybe I'm having problems expressing my self properly.
I've updated the plunker.
http://plnkr.co/edit/928wciFp8hmRrOTtlEYP?p=preview

There is now a text field in each tab. Every time a tab is selected the value of tab.title is updated to the current time and displayed in the text field.

What I would have liked is that the title of the tab is changed as well.

@mklickman
Copy link

I have this exact use case (app data changes, would like the tab title to update dynamically). Has there been any progress or updates on this issue?

@thomasMary
Copy link

Same here, would like to translate my title and so update the title on language change..

@psgganesh
Copy link

I use the same in below way

<ion-tab title="{{ 'coffee_title_label' | translate }}">

image

But when it is

<ion-tab translate="coffee_title_label" title="{{ 'coffee_title_label' | translate }}">

image

I referred the below codepen example
http://codepen.io/andrewmcgivery/pen/tqymb

Can you let me know, what am doing wrong here !

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 7, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants