Question

我正在使用angular-translate并尝试使用选择菜单（on-change）在运行时更改语言（不刷新页面）。但是，我正在处理的应用程序的前端从通过$translate.instant()方法执行的翻译中获取其文本，因此当我通过$translate.use(langKey);执行语言更改时，它对来自控制器内的文本。

当使用指令或过滤器通过HTML标记执行翻译时工作，但我正在处理一个相对较大的现有代码库，并试图节省自己的大量工作重构一切以将翻译移动到标记中。

~~我的控制器代码如下，我还设置了一个Plunker来演示问题（尽管有按钮而不是下拉列表，但问题是相同的）：http://plnkr.co/edit/ohzN9G < /德尔>~~

更新：我确实设法根据此解决方案实现了这项工作：angular translate update translation table。但是，我的版本涉及为每个控制器使用$watch，这在性能方面很昂贵，并且仍然需要在所有控制器上实施大量的重构：http://plnkr.co/edit/TjEVeX

是否有更优雅的方式来实现相同的结果？

JS

var translationsEN = {
  HEADLINE: 'What an awesome module!',
  PARAGRAPH: 'Srsly!',
  PASSED_AS_TEXT: 'Hey there! I\'m passed as text value!',
  PASSED_AS_ATTRIBUTE: 'I\'m passed as attribute value, cool ha?',
  PASSED_AS_INTERPOLATION: 'Beginners! I\'m interpolated!',
  VARIABLE_REPLACEMENT: 'Hi {{name}}',
  MISSING_TRANSLATION: 'Oops! I have not been translated into German...',
  BUTTON_LANG_DE: 'German',
  BUTTON_LANG_EN: 'English'
};

var translationsDE= {
  HEADLINE: 'Was für ein großartiges Modul!',
  PARAGRAPH: 'Ernsthaft!',
  PASSED_AS_TEXT: 'Hey! Ich wurde als text übergeben!',
  PASSED_AS_ATTRIBUTE: 'Ich wurde als Attribut übergeben, cool oder?',
  PASSED_AS_INTERPOLATION: 'Anfänger! Ich bin interpoliert!',
  VARIABLE_REPLACEMENT: 'Hi {{name}}',
  // MISSING_TRANSLATION is ... missing :)
  BUTTON_LANG_DE: 'Deutsch',
  BUTTON_LANG_EN: 'Englisch'
};

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

app.config(['$translateProvider', 'translationHelperProvider', function ($translateProvider, translationHelperProvider) {
  // add translation tables
  $translateProvider.translations('en', translationsEN);
  $translateProvider.translations('de', translationsDE);
  $translateProvider.preferredLanguage('en');
  $translateProvider.fallbackLanguage('en');
  $translateProvider.useSanitizeValueStrategy('sanitize');

  translationHelperProvider.translations = $translateProvider.translations();

}]);

app.provider('translationHelper', function () {
    this.translations = {};

    this.$get = function () {
        return {
            translations: this.translations,
            preferredLanguage: this.preferredLanguage
        }
    };  
});

app.controller('Ctrl', ['$rootScope', '$translate', '$scope', 'translationHelper', function ($rootScope, $translate, $scope, translationHelper) {

  $scope.changeLanguage = function (langKey) {
    $translate.use(langKey).then(function () {
      $rootScope.globalLangKey = langKey;
    })

  }; 
}]);

app.controller('InnerCtrl', ['$rootScope', '$translate', '$scope', 'translationHelper', function ($rootScope, $translate, $scope, translationHelper) {
  $scope.translateMe = $translate.instant("HEADLINE");
 $rootScope.$watch('globalLangKey', function (newVal, oldVal) {
     if (newVal) {
       $scope.translateMe = translationHelper.translations[newVal]["HEADLINE"];
     }
 });
}]);

app.controller('AnotherInnerCtrl', ['$rootScope', '$translate', '$scope', 'translationHelper', function ($rootScope, $translate, $scope, translationHelper) {
  $scope.translateMeAParagraph = $translate.instant("PARAGRAPH");
 $rootScope.$watch('globalLangKey', function (newVal, oldVal) {
     if (newVal) {
       $scope.translateMeAParagraph = translationHelper.translations[newVal]["PARAGRAPH"];
     }
 });
}]);

MARKUP

<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="https://cdn.rawgit.com/SlexAxton/messageformat.js/v0.3.1/messageformat.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-cookies.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-sanitize.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.10.0/angular-translate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-interpolation-messageformat/2.10.0/angular-translate-interpolation-messageformat.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-storage-cookie/2.10.0/angular-translate-storage-cookie.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-sanitize.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-storage-local/2.10.0/angular-translate-storage-local.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-loader-url/2.10.0/angular-translate-loader-url.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-loader-static-files/2.10.0/angular-translate-loader-static-files.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-handler-log/2.10.0/angular-translate-handler-log.js"></script>

    <script src="script.js"></script>
  </head>
  <body>

<div ng-controller="Ctrl">
  <p>{{ 'HEADLINE' | translate }}</p> 
  <p>{{ 'PARAGRAPH' | translate }}</p>


  <div ng-controller="InnerCtrl">
    <hr>
    <h2>This is the new nested controller I set up as a test</h2>
    <br>
    I used code from within the controller to translate this: 
    <br> {{translateMe}}
    <br>
    <br>
    This was done using <pre style="display: inline; font-weight: bold">translate="PASSED_AS_ATTRIBUTE</pre> approach<br>
    <span translate="PASSED_AS_ATTRIBUTE"></span></pre> <span translate="PASSED_AS_ATTRIBUTE"></span>
    <hr>

  </div>

    <div ng-controller="AnotherInnerCtrl">
      Here is another nested controller with the translation being executed from within the controller: <p>{{translateMeAParagraph}}</p>
      <hr>
    </div>



  <button ng-click="changeLanguage('de')" translate="BUTTON_LANG_DE"></button>
  <button ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN"></button>
</div>


  </body>
</html>

Answer 1

如果你想使用$ translate.instant（），你应该添加$ scope。$ watch以获取触发其代码所需的值

Angular Translate - 在运行时更新在控制器中通过$ tranlate.instant（）执行的翻译

1 个答案: