AngularJS：加载异步翻译问题

我正在用AngularJS构建网站。我遇到了翻译问题，得到了或多或少的解决方案，但我认为它可以做得更好。AngularJS：加载异步翻译问题

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

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

数据是格式化的一个这样的数组：

{key: "translation",…}

此外在I具有用于每个状态的控制器。我希望它可以做这样的事情：因为这个代码之前调用的GET请求还没有完成，因此$ rootscope.translations变量没有设置

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

显然，这是行不通的。

而是我写了下面的内容。在成功完成获取请求后，updateTranslations（）函数在MainController（上面）中的loadTransition（）函数中调用。

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

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

来源

2016-07-27 user3916916

也许这个答案是不直接回答你的问题，而是一个可能的新途径......

我们一直在使用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个根状态，以及许多根状态的子状态。

来源

2016-07-27 21:21:45

AngularJS：加载异步翻译问题

回答

相关问题