AngularJS：加载异步翻译问题答案

【问题标题】：AngularJS: loading async translations issueAngularJS：加载异步翻译问题
【发布时间】：2016-07-27 20:58:41
【问题描述】：

我正在用 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-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();
    }
    }
]);

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

【问题讨论】：

标签： javascript angularjs asynchronous angularjs-scope translation

【解决方案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();
            }
        }
    });
});

在上面的例子中，状态/ 会在loadService.loadLabels() 后面的$http.get 承诺被解决后才被解决。这意味着在解决所有解析后将加载模板。

在这种情况下，您的视图将被加载 - 之后您的所有标签都被加载并可由控制器（稍后的视图）访问。

一件好事是nested state definitions 是完全可能的。这意味着，您可以有 1 个根状态，以及根状态的许多子状态。

【讨论】：