javascript - 在 Controller 中正确使用 Angular 平移

Question

我正在使用 angular-translate用于 AngularJS 应用程序中的 i18n。

对于每个应用程序 View ，都有一个专用 Controller 。在下面的 Controller 中，我将值设置为显示为页面标题。

代码

HTML

<h1>{{ pageTitle }}</h1>

JavaScript

.controller('FirstPageCtrl', ['$scope', '$filter', function ($scope, $filter) {
        $scope.pageTitle = $filter('translate')('HELLO_WORLD');
    }])

.controller('SecondPageCtrl', ['$scope', '$filter', function ($scope, $filter) {
        $scope.pageTitle = 'Second page title';
    }])

我正在使用 angular-translate-loader-url 加载翻译文件扩展名。

问题

在初始页面加载时，会显示翻译键而不是该键的翻译。翻译是Hello, World! ，但我看到了 HELLO_WORLD .

我第二次进入该页面时，一切正常，并显示了翻译版本。

我假设这个问题与以下事实有关:当 Controller 将值分配给 $scope.pageTitle 时，翻译文件可能尚未加载。 .

备注

使用 <h1>{{ pageTitle | translate }}</h1> 时和 $scope.pageTitle = 'HELLO_WORLD'; , 翻译工作从第一次完美。这个问题是我并不总是想使用翻译(例如，对于第二个 Controller ，我只想传递一个原始字符串)。

问题

这是已知问题/限制吗？如何解决？

Answer 1

推荐:不要在 Controller 中翻译，在你的 View 中翻译

我建议让您的 Controller 不受翻译逻辑的影响，并像这样在您的 View 中直接翻译您的字符串:

<h1>{{ 'TITLE.HELLO_WORLD' | translate }}</h1>

使用提供的服务

Angular Translate 提供了 $translate 服务，您可以在 Controller 中使用它。

$translate 服务的用法示例如下:

.controller('TranslateMe', ['$scope', '$translate', function ($scope, $translate) {
    $translate('PAGE.TITLE')
        .then(function (translatedValue) {
            $scope.pageTitle = translatedValue;
        });
});

翻译服务还有一种方法可以直接翻译字符串而不需要处理 promise ，使用$translate.instant():

.controller('TranslateMe', ['$scope', '$translate', function ($scope, $translate) {
    $scope.pageTitle = $translate.instant('TITLE.DASHBOARD'); // Assuming TITLE.DASHBOARD is defined
});

使用 $translate.instant() 的缺点可能是如果您正在异步加载语言文件，则它尚未加载。

使用提供的过滤器

这是我的首选方式，因为我不必以这种方式处理 promise 。过滤器的输出可以直接设置为范围变量。

.controller('TranslateMe', ['$scope', '$filter', function ($scope, $filter) {
    var $translate = $filter('translate');

    $scope.pageTitle = $translate('TITLE.DASHBOARD'); // Assuming TITLE.DASHBOARD is defined
});

使用提供的指令

由于@PascalPrecht 是这个很棒的库的创建者，我建议使用 his advise (see his answer below)并使用提供的指令，它似乎可以非常智能地处理翻译。

The directive takes care of asynchronous execution and is also clever enough to unwatch translation ids on the scope if the translation has no dynamic values.