AngularJS: проблема с загрузкой асинхронных переводов

0

Я создаю сайт с AngularJS. Я столкнулся с проблемами с переводами, получил более тяжелое рабочее решение, но я думаю, что это можно сделать намного лучше.

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

$http.get($rootScope.ApiUrl + '/?a=sprache&lang=' + $rootScope.lang).success(function (data) {
        $scope.spr = data;
        $rootScope.translations = data;
        $rootScope.updateTranslations();
    });

data - массив, отформатированный следующим образом:

{key: "translation",…}

Далее у меня есть контроллер для каждого состояния. Я надеялся, что это может сделать что-то вроде этого:

app.controller('InventoryCtrl', [
'$scope',
'$http',
'$location',
'$state',
'$stateParams',
'$rootScope',
'$uibModalStack',
function ($scope, $http, $location, $state, $stateParams, $rootScope, $uibModalStack) {
    $scope.title = $rootscope.translations.myTranslatedTitleForThisState
]);

Очевидно, что это не работает, поскольку запрос get не завершен до того, как этот код вызван, и поэтому переменная $ rootscope.translations не установлена.

Вместо этого я написал следующее. Функция updateTranslations() вызывается из функции loadTransition() в MainController (выше) после успешного завершения запроса get-request.

app.controller('InventoryCtrl', [
'$scope',
'$http',
'$location',
'$state',
'$stateParams',
'$rootScope',
'$uibModalStack',
function ($scope, $http, $location, $state, $stateParams, $rootScope, $uibModalStack) {
    $rootScope.updateTranslations = function() {
        $rootScope.setMetaTags($rootScope.translations.inventory_title, $rootScope.translations.inventory_description);
        $rootScope.updateTranslations();
    }
    }
]);

Я уверен, что это можно сделать намного лучше. Есть идеи?

Теги:
asynchronous
translation
angularjs-scope

1 ответ

0

Возможно, этот ответ не является прямым ответом на вашу проблему, но возможен новый подход...

Мы используем ui-router довольно много в недавних проектах Angular. ui-router идеально подходит для определения маршрутов в приложении. Подробнее об этом здесь.

resolvement особенностью является resolvement штата. Это означает, что состояние будет разрешаться только тогда, когда решение обещания будет разрешено.

Пример

angular.module('testApp').config(function($stateProvider) {
    $stateProvider.state('', {
        url: '/',
        templateUrl: 'main.html',
        resolve: {
            labels: function(labelService) {
                return labelService.loadLabels();
            }
        }
    });
});

В приведенном выше примере состояние / будет разрешено после обещания $http.get за loadService.loadLabels(). Значение шаблона будет загружено после разрешения всех разрешений.

В этом случае ваше представление будет загружено - после этого все ваши метки будут загружены и доступны контроллеру (позднее представление).

Приятно, что nested state definitions вполне возможны. Это означает, что у вас может быть 1 корневое состояние и много дочернего состояния корневого состояния.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню