使用useStaticFilesLoader加载嵌套的json的角度转换

I have a nested json structure like this

我有一个像这样的嵌套json结构

    {
        "module1": {
            "component1": "text1",
            "component2": "text2" 
        }   
    }

So inside my code I am using {"module1.component1" | translate} which never get resolved whereas if I do

因此，在我的代码中，我使用{"module1.component1" | translate}，它永远不会解析，如果我这样做的话

    {      
        "component1": "text1",
        "component2": "text2"           
    }

{"component1" | translate} works . Is there a way to resolve nested JSON data using useStaticFilesLoader

{“component1”|翻译工作。是否有一种方法可以使用useStaticFilesLoader解析嵌套的JSON数据

edit 1: here is my useStaticFilesLoader config looks like :

编辑1:这是我的useStaticFilesLoader配置如下:

$translateProvider.useStaticFilesLoader({
        prefix: './langfiles/',
        suffix: '.json'
      });
    $translate.use(lang);//lang is derived from header

langfiles contains : en_US.json etc

langfiles包含:en_US。json等

1 个解决方案

#1

Check out this post: Accessing nested JSON objects and see if that helps. Their JSFiddle show how it can be done: http://jsfiddle.net/z1uLjg89/

查看这篇文章:访问嵌套的JSON对象，看看是否有帮助。他们的JSFiddle显示了如何实现它:http://jsfiddle.net/z1uLjg89/

// Including ngTranslate
angular.module("ngTranslate", ["ng"]).config(["$provide", function (n) {
    $TranslateProvider = function () {
        var n, t = {};
        this.translations = function (n, r) {
            if (!n && !r) return t;
            if (n && !r) {
                if (angular.isString(n)) return t[n];
                t = n
            } else t[n] = r
        }, this.uses = function (r) {
            if (!r) return n;
            if (!t[r]) throw Error("$translateProvider couldn't find translationTable for langKey: '" + r + "'");
            n = r
        }, this.$get = ["$interpolate", "$log", function (r, a) {
            return $translate = function (e, i) {
                var l = n ? t[n][e] : t[e];
                return l ? r(l)(i) : (a.warn("Translation for " + e + " doesn't exist"), e)
            }
        }]
    }, n.provider("$translate", $TranslateProvider)
}]), angular.module("ngTranslate").directive("translate", ["$filter", "$interpolate", function (n, t) {
    var r = n("translate");
    return {
        restrict: "A",
        scope: !0,
        link: function (n, a, e) {
            e.$observe("translate", function (r) {
                n.translationId = angular.equals(r, "") ? t(a.text())(n.$parent) : r
            }), e.$observe("values", function (t) {
                n.interpolateParams = t
            }), n.$watch("translationId + interpolateParams", function () {
                a.html(r(n.translationId, n.interpolateParams))
            })
        }
    }
}]), angular.module("ngTranslate").filter("translate", ["$parse", "$translate", function (n, t) {
    return function (r, a) {
        return angular.isObject(a) || (a = n(a)()), t(r, a)
    }
}]);

// Configuring your module, asking for ngTranslate as dependency
var app = angular.module('myApp', ['ngTranslate']);

// Configuring $translateProvider
app.config(['$translateProvider', function ($translateProvider) {

    // Simply register translation table as object hash
    $translateProvider.translations('en', {
        "SEARCH": {
            "SEARCH": "Recherce",
                "ABILITY": "Abilities",
                "MANAGEMENT": "Management Competencies",
                "PERSONAL": "Personal Suitability"
        },

            "ABILITIES": {
            "TITLE": "Test Title here",
                "ADVISORY": {
                "TITLE": "Advisory Skills",
                    "QUESTIONS": [{
                    "TYPE": "A",
                        "LEVEL": "45",
                        "DESCRIPTION": "Can you tell me how awesome you are"
                }, {
                    "TYPE": "B",
                        "LEVEL": "100",
                        "DESCRIPTION": "Tell me about your wicked project"
                }]
            }
        },

            "HEADLINE": "Oh No!",
            "SUB_HEADLINE": "Looks like you are not amazing"
    });

    var list = $translateProvider.translations('en');
    console.log(list);
    var getTitle = list.HEADLINE;
    var getSearch = list.SEARCH.ABILITY;
    console.log(getSearch);
    console.log(getTitle);
}]);

<div ng-app="myApp"></div>

A possible work around is to flatten your json file.

一种可能的工作是使您的json文件变平。

Fastest way to flatten / un-flatten nested JSON objects or Convert complex JavaScript object to dot notation object

将嵌套的JSON对象或将复杂的JavaScript对象转换为点符号对象的最快方法

This fiddle shows you how what it will look like: http://fiddle.jshell.net/blowsie/S2hsS/show/light/

这个小提琴向你展示了它的样子:http://fiddle.jshell.net/blowsie/S2hsS/show/light/

#1