Question

我正在使用AngularJS并创建了一个Module，它有一个Factory和一个Filter。工厂获取本地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 }}

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

在过滤器运行之前设置Factory的返回。
另外，我对如何防止整个应用程序呈现直到此过滤器准备就绪感到困惑？

任何帮助都会让我感到惊讶，因为我迷失了:(

Answer 1

您是否有理由不使用现有的angularjs翻译库，例如angular-translate？

Answer 2

在工厂方法中，您需要返回服务本身，而不是操作结果。（我不确定你想从这个服装中得到什么）
当你返回t.language它总是为null并且它在你的过滤器中保持为null ...因为你的http调用是异步的。
我会这样做：

app.module（＆＃39; translationDataFact＆＃39;，[＆＃39; $ resource＆＃39;，function（$ resource）{
var t = {};
t.init = function（）{ t.result = $ resource（＆＃39; ...＆＃39;）;
}
t.init（）
返回; }]）;

在控制器中你有： $ scope.language = translationDataFact.result;

使用参数进行过滤，在过滤器内可以检查语言是否未定义。所以后来你写道：

{{ "string" | t:language}

语言到达之后＆＃39;你看翻译。

Answer 3

回答您的疑虑：

您的工厂应该返回可以要求特定翻译的内容。如果翻译未准备好，只需返回基本内容，如空字符串或null。 e.g。

return translations.t(languageFile, translationKey);

其中t()是一个检查translations的内部数据结构的函数，如果尚未加载翻译，则可以返回翻译结果或前面提到的值。< / p>
您可以在顶级元素上执行ng-show="translations.isLoaded()"之类的操作，但您需要在最高级别的translations上设置对$scope服务的引用水平控制器。您可能希望在$rootScope上执行此操作，因此您的翻译服务也始终可在控制器中使用。

角度工厂和过滤器$ http

3 个答案: