Combining of angular-ui-bootstrap radio button and angular-translate directives

Question

I'm using angular-ui-bootstrap radio button btn-radio directive together with the angular-translate i18n translate directive

The combination of both directives in the <label> element makes the btn-radio failing.

I created a plunkr to show the btn-radio behaviour

I know there are some issues sharing multiple directives on one dom element and a workaround could be to put the translate directive on a sub span element, or using the translate filter.

So, my question is: is there a way to make these both directives work on the same element?

Answer 1

My mother tongue is Korean, not English. so, my english is not good.

cause : conflict bootstrap ui and translate library with html element attribute

solution :

1. not using translate with element attribute

2. so, remove element translate attribute.

3. add function to controller for translate language options.

ex) 
  $scope.translate = function(id)
  {
      return $translate.instant(id);
  };

4. translate using function

ex) 
  <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">{{translate('BTN_A')}}</label>

5. demo : http://plnkr.co/edit/TPwTan2dSmMVQbNtxpgg?p=preview

   test with blue button.

Answer 2

I just run into the same problem and found a simpler solution without the need to add a function in the controller, but simply using the filter:

<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">{{'TRANSLATION.KEY' | translate}}</label>