Правильное использование angular-translate в контроллерах

РЕДАКТИРОВАТЬ: см. ответ 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, так что это не может быть так уж плохо ...

Рекомендуется: не переводите в контроллере, переводите в вашем представлении

Я бы рекомендовал освободить ваш контроллер от логики перевода и переводить ваши строки прямо внутри вашего представления следующим образом:

<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 является создателем этой замечательной библиотеки, я бы рекомендовал воспользоваться его советом (см. Его ответ ниже) и используйте предоставленную директиву, которая, кажется, очень умно обрабатывает переводы.

Директива заботится об асинхронном выполнении, а также достаточно умен, чтобы не отслеживать идентификаторы перевода в области видимости, если перевод не имеет динамических значений.

Собственно, вместо этого вам следует использовать директиву translate.

<h1 translate="{{pageTitle}}"></h1>

Директива заботится об асинхронном выполнении, а также достаточно умен, чтобы не отслеживать идентификаторы перевода в области видимости, если перевод не имеет динамических значений.

Однако, если выхода нет и вам действительно нужно использовать $translate службу в контроллере, вы должны заключить вызов в событие $translateChangeSuccess, используя $rootScope в сочетании с $translate.instant() следующим образом:

.controller('foo', function ($rootScope, $scope, $translate) {
  $rootScope.$on('$translateChangeSuccess', function () {
    $scope.pageTitle = $translate.instant('PAGE.TITLE');
  });
})

Так почему $rootScope, а не $scope? Причина этого в том, что в angular-translate события $emited на $rootScope, а не $broadcasted на $scope, потому что нам не нужно транслировать через всю иерархию области видимости.

Почему $translate.instant(), а не только асинхронный $translate()? Когда запускается событие $translateChangeSuccess, это означает, что необходимые данные перевода есть и асинхронное выполнение не происходит (например, выполнение асинхронного загрузчика), поэтому мы можем просто использовать $translate.instant(), который является синхронным и просто предполагает, что переводы доступны.

Начиная с версии 2.8.0 существует также $translate.onReady(), который возвращает обещание, которое выполняется, как только переводы готовы. См. журнал изменений.

Чтобы сделать перевод в контроллере, вы можете использовать сервис $translate:

$translate(['COMMON.SI', 'COMMON.NO']).then(function (translations) {
    vm.si = translations['COMMON.SI'];
    vm.no = translations['COMMON.NO'];
});

Этот оператор выполняет перевод только при активации контроллера, но не обнаруживает изменения языка во время выполнения. Чтобы добиться такого поведения, вы можете прослушать событие $rootScope: $translateChangeSuccess и сделать там такой же перевод:

    $rootScope.$on('$translateChangeSuccess', function () {
        $translate(['COMMON.SI', 'COMMON.NO']).then(function (translations) {
            vm.si = translations['COMMON.SI'];
            vm.no = translations['COMMON.NO'];
        });
    });

Конечно, вы можете инкапсулировать $translateservice в метод и вызывать его в контроллере и в $translateChangeSucesslistener.

Происходит то, что Angular-translate наблюдает за выражением с помощью системы, основанной на событиях, и, как и в любом другом случае привязки или двусторонней привязки, событие запускается, когда данные извлекаются, и значение изменяется, что явно не работает на перевод. Данные перевода, в отличие от других динамических данных на странице, конечно же, должны немедленно отображаться для пользователя. Он не может появиться после загрузки страницы.

Даже если вы можете успешно отладить эту проблему, более серьезная проблема заключается в том, что требуется огромная работа по разработке. Разработчик должен вручную извлечь каждую строку на сайте, поместить ее в файл .json, вручную указать на нее код строки (например, pageTitle в данном случае). На большинстве коммерческих сайтов есть тысячи строк, для которых это должно произойти. И это только начало. Теперь вам нужна система синхронизации переводов при изменении основного текста в некоторых из них, система для отправки файлов перевода различным переводчикам, их реинтеграции в сборку, повторного развертывания сайта, чтобы переводчики могли видеть их изменения в контексте, и так далее.

Кроме того, поскольку это «привязанная» система, основанная на событиях, событие запускается для каждой отдельной строки на странице, что не только является более медленным способом преобразования страницы, но и может замедлить все действия на странице, если вы начнете добавлять к нему большое количество событий.

В любом случае, использование платформы для постобработки переводов имеет для меня больше смысла. Например, используя GlobalizeIt, переводчик может просто перейти на страницу сайта и начать редактировать текст прямо на странице для своего языка, и все: https://www.globalizeit.com/HowItWorks. Никакого программирования не требуется (хотя его можно расширять программно), он легко интегрируется с Angular: https://www.globalizeit.com/Translate/Angular, преобразование страницы происходит за один раз, и он всегда отображает переведенный текст с первоначальной визуализацией страницы.

Полное раскрытие: я соучредитель :)