Angular-translate：如何在另一翻译中使用已翻译变量

嘿，我完全懂你的困扰——之前在控制器里手动搞变量替换，不仅代码繁琐，语言切换的时候还要处理一堆事件，简直头大！而且还不能用指令，因为最终要绑定到input的属性上对吧？别担心，其实有更优雅的解决办法，不用再折腾控制器里的复杂逻辑了。

第一步：配置带占位符的翻译键 #

首先在你的翻译资源文件里，把ANOTHER_KEY定义成带变量占位符的格式：

// 示例英文翻译配置
{
  "ANOTHER_KEY": "{{anything}} is {{something}}"
}

其他语言的配置也按照同样的占位符格式来写就行，比如中文可以写成"{{anything}} 是 {{something}}"。

最简洁的实现：用translate过滤器直接绑定到属性 #

你不需要在控制器里写一堆初始化和监听代码，直接在模板里用translate过滤器结合ng-attr-*指令（专门用来绑定HTML属性）就能搞定，而且它会自动响应语言切换！

模板代码示例：

<!-- 比如绑定到placeholder属性 -->
<input type="text" ng-attr-placeholder="{{ 'ANOTHER_KEY' | translate:{anything: 'Anything', something: 'Something'} }}" />

如果是其他属性（比如title），只需要把ng-attr-placeholder换成对应的ng-attr-title就行。

这个方法的妙处在于：

• 不用手动处理语言切换事件，过滤器会自动监听$translateChangeSuccess事件并更新值
• 代码极度简洁，模板层面直接完成变量替换和属性绑定
• 完美适配你“不能用指令”的需求，因为ng-attr-*是Angular原生的属性绑定方式，不属于自定义指令范畴

备选方案：控制器结合$translate.instant（适合复杂逻辑场景） #

如果你的变量值需要从控制器里动态获取（比如从API返回的数据），那可以用$translate.instant方法，同时监听语言切换事件来自动更新：

app.controller('YourController', function($scope, $translate) {
  // 假设变量是动态获取的
  $scope.dynamicVars = {
    anything: 'Anything',
    something: 'Something'
  };

  // 初始化翻译值
  function updateInputAttr() {
    $scope.inputAttrValue = $translate.instant('ANOTHER_KEY', $scope.dynamicVars);
  }
  updateInputAttr();

  // 监听语言切换，自动更新
  $scope.$on('$translateChangeSuccess', updateInputAttr);
});

然后模板里绑定：

<input type="text" ng-attr-placeholder="{{inputAttrValue}}" />

这种方式适合变量需要动态变化的场景，但相比过滤器方案会多一点控制器代码。

关键注意点 #

• 确保翻译键里的占位符名称（比如{{anything}}）和你传递的对象键名完全一致
• 用ng-attr-*而不是直接绑定属性，因为Angular的普通插值在属性里有时候不会正确更新，ng-attr会确保属性值随作用域变化而更新

内容的提问来源于stack exchange，提问作者Saita