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

一尘不染

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

angularjs

我在AngularJS应用程序中为i18n 使用angular-translate。

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

码

的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。

第二次我进入页面时，一切都很好，并显示了翻译版本。

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

备注

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

题

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

阅读 231

2020-07-04

共1个答案

一尘不染

编辑：请参阅PascalPrecht（angular-translate的作者）的答案，以获得更好的解决方案。

加载的异步性质导致了该问题。您会看到，使用{{ pageTitle | translate }}，Angular将监视该表达式；加载本地化数据后，表达式的值将更改，并且屏幕将更新。

因此，您可以自己做：

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

但是，这将在每个摘要循环上运行监视的表达式。这不是最理想的，可能会或可能不会导致明显的性能下降。无论如何，这是Angular所做的，所以它不会那么糟糕…

2020-07-04