Angular工厂和过滤器$http

Angular Factories and Filters $http

本文关键字：http 过滤器 工厂 Angular      更新时间：2023-09-26

我正在使用AngularJS，并创建了一个模块，它有一个工厂和一个过滤器。工厂获取本地json文件翻译），过滤器提供了一个返回文本翻译版本的函数。因此，代码如下所示；

angular
    .module('i18n', [])
    .factory('translationDataFact', ['$http', function($http){
        var t = {};
        var user = {};
        t.defaultLanguage = 'en-GB';
        t.languageFile = null;
        t.init = function(){
            t.setLanguage();
            if(!t.languageFile){
                $http
                    .get('translations/' + t.defaultLanguage + '.json')
                    .success(function(data){
                        t.languageFile = data.strings;
                    })
                    .error(function(error){
                        console.log(error);
                    });
            }
        }
        t.setLanguage = function(){
            /* change default language to User language here */
            if(user.id){
                t.defaultLanguage = user.language;
            }
            return t.defaultLanguage;
        }
        t.init();
        return t.languageFile;
    }])
    .filter('t', ['translationDataFact', function (translationDataFact) {
        var translate = function (stringIdenitfier) {
            var translation = translationDataFact.languageFile[stringIdenitfier];
            if(translation){
                return translation;
            }
            return "translate me!!";
        };
        return translate(stringIdenitfier);
    }]);

然后我希望使用过滤器来翻译像这样的变量和名称

{{"string" | t }}

我遇到的问题是我不知道如何确保

  1. Factory的返回是在Filter运行此操作之前设置的
  2. 此外，我对如何在这个过滤器准备好之前阻止整个应用程序渲染感到困惑

任何帮助都将是惊人的，因为我迷路了：（

您为什么不使用现有的angularjs翻译库（如angular translate）？

  1. 在工厂中，方法u需要返回Service本身，而不是操作的结果。（我不确定你到底想从这个服务中得到什么）

  2. 当您返回t.language时，它始终为null，并且在您的筛选器中保持为null。。。因为您的http调用是异步的。

  3. 我会这样做：

    app.module（'translationDataFact'，['$resource'，function（$resource）｛
    var t={}
    t.init=函数（）{t.result=$resource（"…"）
    }
    t.init（）
    返回t；}])；

在控制器中，您有：$scope.language=translationDataFact.result；

您可以使用参数制作过滤器，在过滤器内部您可以检查语言是否未定义。所以稍后你会写：

{{ "string" | t:language}

在语言"到达"之后，你会看到翻译。

回答您的问题：

  1. 你的工厂应该退回一些可以要求具体翻译的东西。如果翻译还没有准备好，只需返回一些基本的东西，比如空字符串或null。例如

    return translations.t(languageFile, translationKey);

    其中t()将是一个检查translations的内部数据结构的函数，并且如果尚未加载翻译，则可以返回翻译的结果或前面提到的值。

  2. 您可以在顶级元素上执行类似ng-show="translations.isLoaded()"的操作，但您需要在最高级别控制器的$scope上设置对translations服务的引用。您可能希望在$rootScope上执行此操作，以便您的翻译服务在控制器中也始终可用。

相关文章：