AngularJS自定义过滤器中加载指定JSON翻译文件的实现求助

嘿，作为AngularJS新手，你这个多语言翻译的思路是对的，但有个关键问题要注意：过滤器是同步执行的，而加载JSON文件是异步操作，直接在过滤器里用$http加载JSON会导致翻译内容无法及时返回。下面我给你一套可行的实现方案：

第一步：创建翻译服务管理多语言数据 #

首先我们需要一个服务来处理翻译数据的加载和存储，因为服务可以管理异步操作，而且能在整个应用中共享数据：

app.service('TranslationService', ['$http', '$q', function($http, $q) {
  var translations = {};
  var currentLang = localStorage.getItem('userLang') || 'english'; // 默认英语

  // 加载对应语言的JSON文件
  this.loadTranslations = function(lang) {
    currentLang = lang || currentLang;
    var deferred = $q.defer();
    
    // 假设JSON文件放在assets/translations/目录下，命名规则是translate_{lang}.json
    $http.get('assets/translations/translate_' + currentLang + '.json')
      .then(function(response) {
        translations = response.data;
        deferred.resolve(translations);
      })
      .catch(function(error) {
        console.error('加载翻译文件失败:', error);
        deferred.reject(error);
      });
    
    return deferred.promise;
  };

  // 根据key获取翻译内容
  this.getTranslation = function(key) {
    return translations[key] || key; // 如果没有对应翻译，返回原key
  };

  // 获取当前语言
  this.getCurrentLang = function() {
    return currentLang;
  };
}]);

第二步：在应用启动时预加载翻译数据 #

我们需要在应用初始化的时候，根据localStorage里的语言值加载对应的翻译文件，在run块里调用服务的方法：

app.run(['TranslationService', function(TranslationService) {
  // 启动时加载用户选择的语言（或默认语言）的翻译
  TranslationService.loadTranslations();
}]);

第三步：修改你的自定义过滤器 #

现在过滤器可以直接依赖翻译服务，同步获取翻译内容，不用再处理异步加载了：

app.filter("myFilter", ['TranslationService', function(TranslationService) {
  return function(input) {
    // 如果input为空，直接返回
    if (!input) return input;
    // 从服务获取翻译，没有的话返回原输入
    return TranslationService.getTranslation(input);
  };
}]);

关键注意事项 #

• JSON文件格式修正：你提供的法语JSON里用了单引号，JSON要求必须用双引号，所以translate_fr.json要改成这样：

  {
    "SEARCH JOBS": "Recherche de travail",
    "VIEW JOBS": "Voir les offres",
    "Clean Up": "Nettoyer",
    "Missed Bin": "Bin manqué",
    "Bin Replacement": "Remplacement de bac",
    "Dumped Rubbish": "Déchets déversés"
  }
  

• 语言切换处理：如果用户可以切换语言，只需要调用TranslationService.loadTranslations('french')，然后更新localStorage即可，过滤器会自动使用新的翻译数据。
• 异步加载的过渡：如果页面加载时翻译还没加载完成，过滤器会先返回原key，等加载完成后视图会自动更新（因为AngularJS的脏检查机制）。

这样你的过滤器就能完美根据localStorage的语言值返回对应的翻译内容啦～

内容的提问来源于stack exchange，提问作者apple_92