控制器中角度平移的正确使用

我在用着角度平移用于 AngularJS 应用程序中的 i18n。

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

Code

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';
    }])

我正在使用加载翻译文件角度翻译加载器 url扩大。

Problem

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

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

我认为问题与以下事实有关：当控制器将值分配给时，翻译文件可能尚未加载$scope.pageTitle.

Remark

使用时<h1>{{ pageTitle | translate }}</h1> and $scope.pageTitle = 'HELLO_WORLD';，翻译从第一次就很完美。问题是我并不总是想使用翻译（例如，对于第二个控制器我只想传递原始字符串）。

Question

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

建议：不要在控制器中翻译，在您的视图中翻译

我建议让您的控制器不受翻译逻辑的影响，并直接在视图中翻译您的字符串，如下所示：

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

使用所提供的服务

Angular Translate 提供了$translate您可以在控制器中使用的服务。

的示例用法$translate服务可以是：

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

翻译服务还有一种直接翻译字符串的方法，无需处理承诺，使用$translate.instant():

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

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

使用提供的过滤器

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

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

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

使用提供的指令

由于 @PascalPrecht 是这个很棒的库的创建者，我建议使用他的建议（见下面他的回答）并使用提供的指令，它似乎可以非常智能地处理翻译。

该指令负责异步执行，并且如果翻译没有动态值，它也足够聪明，可以取消监视作用域上的翻译 id。