AngularJS-translate技术求助：如何将控制器变量传入app.config？

嘿，我看你在尝试用AngularJS-translate做语言切换应用，想通过控制器输入的值来更新翻译文本对吧？现在你的代码有两个关键问题需要修正：

1. $translateProvider是配置阶段专属的服务，只能在app.config()块里用，控制器里根本调不动它，所以你在changeValue里写的$translateProvider.translations完全不生效。
2. 那个全局的name变量在config执行的时候就已经被塞进翻译对象里了，之后你再改这个变量，也不会同步到已经加载好的翻译数据里。

下面是修正后的完整代码，我标了关键修改点，你可以直接用：

修正后的JS代码 #

var app = angular.module("myApp", ['pascalprecht.translate']);

app.controller("translateController", ["$scope", "$translate", function($scope, $translate) {
  // 先定义初始的翻译数据，也可以单独抽成常量文件，这里为了方便放在控制器里
  var en_translations = {
    "language": 'Anuj',
    "greeting": "Welcome Dinesh"
  };
  var sp_translations = {
    "language": "Selected Language Spanish",
    "greeting": "Bienvenida Dinesh"
  };

  // 初始化翻译配置，把原来config里的逻辑移到控制器里（或者保留config做全局配置）
  $translate.translations('en', en_translations);
  $translate.translations('sp', sp_translations);
  $translate.preferredLanguage('en');

  $scope.changeValue = function() {
    // 重点：用$translate服务的translations方法动态更新英文翻译
    $translate.translations('en', {
      "language": $scope.textname, // 把输入框的值赋值给language翻译项
      "greeting": "Welcome Dinesh" // 保持问候语不变，也可以根据需求修改
    });
    // 因为当前语言是英文的话，更新后需要重新触发翻译，所以调用use('en')
    $translate.use('en');
  };

  $scope.changeLanguage = function(lang) {
    $translate.use(lang);
  };
}]);

// 如果需要做全局配置（比如翻译 sanitize 策略），可以保留这个config块
// app.config(["$translateProvider", function($translateProvider) {
//   $translateProvider.useSanitizeValueStrategy('escape');
// }]);

HTML代码（不用改，保持你原来的就行） #

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script data-require="angular.js@1.3.8" data-semver="1.3.8" src="https://code.angularjs.org/1.3.8/angular.js"></script>
  <script data-require="angular-translate@*" data-semver="2.5.0" src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.5.0/angular-translate.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>
<body>
  <div ng-controller="translateController">
    <h1>Demo for angularJS translator</h1>
    <input type="text" name="" ng-model="textname" />
    {{textname}}
    <button ng-click="changeValue()">Change</button>
    <div>
      <button ng-click="changeLanguage('en')">English</button>
      <button ng-click="changeLanguage('sp')">Spanish</button>
    </div>
    <h2>{{'language' | translate}}</h2>
    Hello!!!
    <p>{{'greeting' | translate}}</p>
  </div>
</body>
</html>

几个核心要点得记住： #

• 动态更新翻译用$translate服务：AngularJS-translate提供了$translate.translations(langKey, translationsObj)方法，专门用来在运行时（比如控制器里）修改翻译内容，这才是正确的姿势。
• 触发翻译更新：当你修改了当前正在使用的语言的翻译数据后，得调用$translate.use(lang)重新触发翻译管道，这样页面上的文本才会跟着变。
• 配置阶段和运行阶段要分清：$translateProvider只负责初始化配置，运行时操作翻译必须用$translate服务，别搞混了～

内容的提问来源于stack exchange，提问作者Anuj Kumar Pal