AngularJS Translate使用咨询：ng-repeat及src/href场景问题

1. ng-repeat 中翻译失效的问题 #

看你的代码，核心问题出在 ng-repeat 的数据源上——你写了 rule in 'rules.points'，这相当于把字符串 "rules.points" 拆成单个字符遍历，完全没拿到翻译文件里对应的数组。下面给你两种可行的解决思路：

方法一：控制器预取翻译数组 #

在控制器里注入 $translate，先把翻译后的规则数组赋值给 $scope 变量，再在模板里遍历：

app.controller('YourController', function($scope, $translate) {
  // 获取翻译后的 rules.points 数组
  $translate('rules.points').then(function(translatedPoints) {
    $scope.rulesPoints = translatedPoints;
  });
});

模板代码调整为：

<ul ng-repeat="rule in rulesPoints">
  <li>{{ rule.text }}</li>
</ul>

方法二：模板内直接用 translate 过滤器 #

不想改控制器的话，直接把 translate 过滤器加到 ng-repeat 的数据源上，让它先把翻译键转成数组再遍历：

<ul>
  <li ng-repeat="rule in ('rules.points' | translate)">{{ rule.text }}</li>
</ul>

另外建议优化你的翻译 JSON 结构，把每个规则文本设为独立键，这样后续维护更灵活：

{
  "rules": {
    "point1": "第一条规则：禁止重复提交",
    "point2": "第二条规则：内容需符合规范",
    "point3": "第三条规则：平台保留最终解释权"
  },
  "rulePoints": ["rules.point1", "rules.point2", "rules.point3"]
}

模板简化成：

<li ng-repeat="ruleText in ('rulePoints' | translate)">{{ ruleText }}</li>

2. src/href 属性中使用翻译的示例 #

针对属性绑定，推荐两种能避免初始无效请求的方式：

方式一：结合 ng-src/ng-href + translate 过滤器 #

用 Angular 自带的 ng-src/ng-href 配合翻译过滤器，确保翻译完成后才加载资源：

<!-- 图片示例 -->
<img ng-src="{{ 'USER_AVATAR' | translate }}" alt="用户头像">

<!-- 链接示例（文本也翻译） -->
<a ng-href="{{ 'ABOUT_PAGE' | translate }}" translate="ABOUT_TEXT"></a>

对应的翻译 JSON：

{
  "USER_AVATAR": "/assets/images/avatar-zh.png",
  "ABOUT_PAGE": "/about-zh.html",
  "ABOUT_TEXT": "关于我们"
}

方式二：使用 translate 专属属性指令 #

AngularJS Translate 提供了 translate-src、translate-href 这类指令，直接绑定翻译键即可，写法更简洁：

<!-- 图片示例 -->
<img translate-src="USER_AVATAR" alt="用户头像">

<!-- 链接示例 -->
<a translate-href="ABOUT_PAGE" translate="ABOUT_TEXT"></a>

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