angular-ui-bootstrap 单选按钮和 angular-translate 指令的组合

Question

我正在使用 angular-ui-bootstrap 单选按钮 btn-radio directive together with the angular-translate i18n translate directive

<label> 元素中两个指令的组合导致 btn-radio 失败。

我创建了 a plunkr 来显示 btn-radio 行为

我知道在一个 dom 元素上共享多个指令存在一些问题，解决方法可能是将 translate 指令放在子 span 元素上，或者使用 translate过滤器。

所以，我的问题是：有没有办法让这两个指令在同一个元素上工作？

Answer 1

我的母语是韩语，不是英语。所以，我的英语不好。

原因：冲突 bootstrap ui 并使用 html 元素属性翻译库

解决方案：

1. 不对元素属性使用翻译

2. 所以，删除元素翻译属性。

3. 向控制器添加翻译语言选项功能。

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

4. 使用函数翻译

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

5. 演示：http://plnkr.co/edit/TPwTan2dSmMVQbNtxpgg?p=preview

   使用蓝色按钮进行测试。

Answer 2

我刚刚 运行 遇到了同样的问题，并找到了一个更简单的解决方案，无需在控制器中添加功能，只需使用过滤器：

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