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

时间:2015-06-11 09:25:11

标签: angularjs angular-ui-bootstrap angular-translate

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

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

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

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

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

2 个答案:

答案 0 :(得分:2)

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

原因:冲突引导ui并使用html元素属性翻译库

解决方案:

  1. 不使用带元素属性的翻译

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

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

  4. ex) 
      $scope.translate = function(id)
      {
          return $translate.instant(id);
      };
    
    1. 使用功能翻译
    2. ex) 
        <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">{{translate('BTN_A')}}</label>
      
      1. 演示:http://plnkr.co/edit/TPwTan2dSmMVQbNtxpgg?p=preview

        用蓝色按钮测试。

答案 1 :(得分:1)

我遇到了同样的问题,发现了一个更简单的解决方案,无需在控制器中添加功能,只需使用过滤器:

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