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