Question

我正在使用AngularJS构建一个网站。我遇到了翻译问题，或多或少有一个hacky工作解决方案，但我认为它可以做得更好。

我有一个主控制器，可以从数据库加载翻译。

$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-request，因此未设置$ rootscope.translations变量。

相反，我写了以下内容。在成功完成get-request之后，从MainController（上面）中的loadTransition（）函数调用updateTranslations（）函数。

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

我很确定这可以做得更好。有什么想法吗？

Answer 1

也许这个答案不是你问题的直接答案，而是一种可能的新方法......

我们在最近的Angular项目中一直使用ui-router。 ui-router非常适合在应用程序中定义路径。关于该主题的更多信息here。

一个不错的功能是状态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个根状态，以及根状态的许多子状态。

AngularJS：加载异步翻译问题

1 个答案: