Is there any way to use angular-translate in ti-segmented-controls?

Question

I am to localize the ionic project. We use ti-segmented-controls there. But it seems to be impossible to use both ti-segmented-controls and angular-translate.

In order to translate something I need to use either directive

<div translate="KEY"></div>

or expression with filter

<div>{{'KEY' | translate}}</div>

But neither works with ti-segmented-controls..

<ti-segmented-control on-select="buttonClicked($index)" style="width: 250px;">
          <ti-segmented-control-button class="button-balanced" title="'One'"></ti-segmented-control-button>
          <ti-segmented-control-button class="button-balanced" title="'Two'" selected></ti-segmented-control-button>
</ti-segmented-control>

There is a way to solve this by using

<ti-segmented-control style="width: 200px;">
            <a class="button button-outline ti-segmented-control"  >{{'KEY2' | translate}}</a>
            <a class="button button-outline ti-segmented-control" >{{'KEY1' | translate}}</a>
</ti-segmented-control>

But in this case we cannot use directive selected. Any suggestions how to translate text in ti-segmented-controls??

Answer 1

Yes you can by Edit "ti-segmented-control.js" like :
    directive('tiSegmentedControlButton', function () {
    return {
        replace: true,
        require: '^tiSegmentedControl',
    transclude: true, // add this line 
        scope: {
            title: '='
        },

        template: '<a class=\"button button-outline ti-segmented-control\"><ng-transclude></ng-transclude></a>', // Add <ng-transclude></ng-transclude>

and From your template you can user :

<ti-segmented-control-button class="button-balanced" selected>{{'DETAILS' | translate}} </ti-segmented-control-button>