我的控制器代码如下，我还设置了一个Plunker来演示这个问题(尽管使用了按钮而不是下拉菜单，但问题是一样的)：http://plnkr.co/edit/ohzN9G
我正在使用角度翻译，并尝试在运行时使用选择菜单(on-change)更改语言(不刷新页面)。然而，我正在处理的应用程序的前端从通过$translate.instant()方法执行的翻译中获取文本，因此当我通过$translate.use(langKey);执行语言更改时，它对来自控制器内的文本没有影响。
当使用指令或过滤器通过HTML标记执行翻译时，它确实有效，但我正在处理一个相对较大的现有代码库，并试图为自己省去重构一切以将翻译移动到标记中的大量工作。
更新：我确实基于这个解决方案做到了这一点：角度翻译更新翻译表。然而，我的版本涉及为每个控制器使用$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>
如果您想使用$translate.instant()，您应该添加$scope$注意触发其代码所需的值