AngularJS结合angular-translate实现数据库产品内容动态翻译求助

你遇到的这个问题很常见：直接把带translate过滤器的表达式存在数据库里，AngularJS只会把它当作普通字符串渲染，不会自动编译执行这个模板逻辑。下面给你几个可行的解决方案，按推荐程度排序：

方案1：直接存储翻译键（最推荐） #

别存完整的{{'product_general' | translate}}，而是只存翻译键product_general到数据库的name字段里。然后在页面模板里直接对这个字段使用translate过滤器：

<!-- 假设你的产品数据绑定在$scope.product上 -->
<div>{{ product.name | translate }}</div>

这个方案最简单，完全贴合angular-translate的设计逻辑，不需要额外处理，也避免了编译带来的潜在风险，维护起来最省心。

方案2：自定义指令编译数据库中的表达式 #

如果因为业务限制必须存完整的表达式字符串，那可以用AngularJS的$compile服务手动编译这段文本。创建一个自定义指令来处理：

angular.module('yourApp').directive('compileTranslate', ['$compile', function($compile) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      // 监听数据库字段的变化，实时编译更新
      scope.$watch(attrs.compileTranslate, function(newVal) {
        if (newVal) {
          element.html(newVal);
          $compile(element.contents())(scope);
        }
      });
    }
  };
}]);

然后在页面中使用这个指令：

<div compile-translate="product.name"></div>

⚠️ 注意：这个方案要确保数据库中的内容是完全可信的，因为$compile会执行所有Angular表达式，若包含恶意代码可能引发XSS攻击。

方案3：手动提取翻译键并调用$translate服务 #

如果不想用指令，也可以在控制器里手动处理。比如用正则表达式从数据库字符串中提取翻译键，然后调用$translate获取对应文本：

angular.module('yourApp').controller('ProductController', ['$scope', '$translate', function($scope, $translate) {
  // 假设从数据库拿到的原始产品数据是$scope.rawProduct
  var translateKeyMatch = $scope.rawProduct.name.match(/'([^']+)' \| translate/);
  if (translateKeyMatch && translateKeyMatch[1]) {
    $translate(translateKeyMatch[1]).then(function(translatedText) {
      $scope.product.name = translatedText;
    });
  }
}]);

这个方案灵活性高，适合处理一些复杂的表达式，但需要维护正则匹配逻辑，若表达式格式变化可能失效。

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