javascript - Angular Translate - 获取翻译表

Question

我正在尝试将 Angular 翻译模块集成到我的应用程序中。

我已经让异步加载器可以正常工作，并且它可以正确加载我的语言翻译。

然而，我遇到的问题是我们的后端基于 Struts 1。我们有一个包含在每个页面加载中的模板，而不是像在单页应用程序中那样交换正文内容。在这个模板中，我们使用 angular.module 和所有依赖项实例化 Angular 应用程序。实例化后，我设置了翻译提供程序:

myApp.config(['$translateProvider', function($translateProvider){
    $translateProvider.useUrlLoader('url/to/my/load/action.do');
    $translateProvider.determinePreferredLanguage();
}]);

因为这个模板包含在每个页面加载中，并且 Angular 应用程序因此在每个页面加载后再次实例化，所以翻译提供程序在每个页面加载时都会点击我的操作来获取翻译。

这不会给后端带来巨大的负载，因为我已经实现了缓存，但是问题是每个页面上都会闪烁未翻译的内容。

我建议的解决方案如下:

• 有一个 Controller 可以捕获由 Angular Translate 触发的 $translateLoadingEnd 事件，并将翻译表放入具有一定过期时间的 Cookie

  myApp.controller('TranslationController', function($scope, $rootScope){
      $rootScope.$on('$translateLoadingEnd',function(event) {
          // Get the translation table and put it in a cookie
      });
  });
  

• 在配置中，如果 cookie 不存在或已存在，我只会设置 $translateProvider.useUrlLoader('url/to/my/load/action.do');已到期。为此，我必须通过将 cookies 服务注入(inject)到配置中来获取 cookie，方法如下( how to use cookiesProvider in angular config )并抓取翻译表:

  var $cookies;
  angular.injector(['ngCookies']).invoke(function(_$cookies_) {
      $cookies = _$cookies_;
  });
  

我的问题是是否有办法获取给定语言的翻译表，以便我可以将其放入 cookie 中。我已经深入研究了该模块的源代码，我发现的唯一的东西只是一个本地函数，并且没有公开供我使用。

也欢迎对我解决这个问题的方法提出任何意见和建议。

Answer 1

我决定以一种更优雅的方式解决这个问题。我没有使用 useUrlLoader 函数，而是使用了自定义加载器。

$translateProvider.useLoader("translationFactory");

myApp.factory("translationFactory", function($q, $resource, localStorageService) {
    var GetTranslationsResource = $resource(baseHref + 'url/to/my/load/actiongetTranslations.do', {}, {});

    return function(options) {
        var deferred = $q.defer();

        var currentTime = new Date().getTime();
        var twelveHours = 12 * 60 * 60 * 1000;

        var translationStorage = localStorageService.get("translationStorage");
        if(translationStorage && translationStorage.expiration + twelveHours > currentTime && translationStorage.translations[options.key]) { // Have local storage, it hasn't been 12 hours yet, and we have translations for this language
            setTimeout(function() { // Need a timeout so that the promise returns first
                return deferred.resolve(translationStorage.translations[options.key]);
            }, 500);
        } else {
            GetTranslationsResource.get({"lang" : options.key}, function(result) {
                switch(result.status){
                    case 'success':
                        var newTranslationStorage = {
                            expiration : currentTime,
                            translations : {}
                        };
                        newTranslationStorage.translations[options.key] = result.data;
                        localStorageService.set("translationStorage", newTranslationStorage);
                        return deferred.resolve(result.data);
                        break;
                    case 'error': deferred.reject(options.key); break;
                    case 'logout': hideLoader(); ajaxLogout(); break;
                }
            }, function(){
                return deferred.reject(options.key);
            });
        }

        return deferred.promise;
    };
});