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

弗朗索瓦·成熟

我正在将angular-ui-bootstrap单选按钮btn-radio指令与angular-translate i18n指令一起使用translate

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

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

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

因此,我的问题是:是否有办法使这两个指令在同一元素上工作?

bgkim

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

原因:冲突引导用户界面和具有html元素属性的翻译库

解决方案 :

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

  2. 因此,删除元素的translate属性。

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

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

    用蓝色按钮测试。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

单击Angular UI Bootstrap单选按钮

来自分类Dev

单击Angular UI Bootstrap单选按钮

来自分类Dev

Angular-translate,其中翻译包含指令

来自分类Dev

Angular-translate:如何翻译离子指令?

来自分类Dev

angular-translate:无法在嵌套指令中使用动态数据

来自分类Dev

AngularJS-使用Angular UI Bootstrap了解指令中的模板

来自分类Dev

AngularJS-使用Angular UI Bootstrap了解指令中的模板

来自分类Dev

Angular-UI模态指令

来自分类Dev

包装angular-ui指令

来自分类Dev

Angular-UI模态指令

来自分类Dev

Angular Translate指令不适用于ngMessage

来自分类Dev

使用ui bootstrap tpls指令

来自分类Dev

Angular UI状态与服务结合

来自分类Dev

Angular UI状态与服务结合

来自分类Dev

结合使用ng-remote-validate指令和Angular-xeditable指令

来自分类Dev

将 Angular (5.2) 路由器与 angular-ui-router (angular 1.3.19) 结合使用

来自分类Dev

Angular 6 - Bootstrap 单选按钮

来自分类Dev

在自己的指令中包装Angular.js ui-bootstrap或ui-select指令

来自分类Dev

如何使用angular-translate和angular-ui-router动态切换语言?

来自分类Dev

控制器或指令中的Angular Bootstrap UI模态?

来自分类Dev

angular-ui引导$ modal服务,使用指令代替

来自分类Dev

使用Angular指令的Kendo UI Grid外键列

来自分类Dev

Angular UI模态指令,背景缺失

来自分类Dev

如何全局配置Angular UI引导指令

来自分类Dev

模态确认作为Angular UI指令

来自分类Dev

模态确认作为Angular UI指令

来自分类Dev

使用angular.js和ui.bootstrap时,模式内部的按钮单击事件不触发

来自分类Dev

Angular ui-router:ui-views vs指令?

来自分类Dev

Angular UI Bootstrap Popover添加关闭按钮

Related 相关文章

热门标签

归档