AngularJS:加载异步转换问题

Question

我正在与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请求之后，将从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();
            }
        }
    });
});

在上面的示例中，状态/将在解析loadService.loadLabels()背后的$http.get promise之后解析。这意味着在所有解决方案都解决之后，模板将被加载。

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

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