Question

我有以下情况：

我有一个包含这种数据的JSON文件：

"IOS_TABLET_DOWNLOAD_URL": {
  "type": "string",
  "minLength": "5",
  "title": "IOS_TABLET_DOWNLOAD_URL",
  "description": "$filter('translate')('configuration.IOS_TABLET_DOWNLOAD_URL')"
},

描述字段需要使用Angular Translate进行翻译，我正在将服务注入我的控制器

ConfigController.$inject = ['$scope', '$filter', '$compile', 'MyService'];
function ConfigController($scope, $filter, $compile, MyService) {

  // And using compile
  $scope.schema = elements; // Where element is the object from MyService
  $compile($scope.schema)($scope);

}

然而，$ filter正在未经处理打印，如视图中的描述

“$滤波器（ '翻译'）（ 'configuration.IOS_TABLET_DOWNLOAD_URL'）”

修改

我正在使用Angular Schema Form来生成表单。所以基本上我在视图中有这样的东西

<div ng-controller="FormController">
   <form sf-schema="schema" sf-form="form" sf-model="model"></form>
</div>

我该怎么做？

Answer 1

完整的工作小提琴是https://jsfiddle.net/dqhwzksx/，它有点长，所以我将在这里拆开相关部分。

主要问题是angular-schema-form和angular-translate都不知道如何处理"description": "$filter('translate')('configuration.IOS_TABLET_DOWNLOAD_URL')"。我们需要自己做翻译。

首先，我们的架构现在不再需要处理过滤器了：

var schema = {
    "type": "object",
    "title": "Sample Schema",
    "properties": {
        "IOS_TABLET_DOWNLOAD_URL": {
          "type": "string",
          "minLength": "5",
          "title": "IOS_TABLET_DOWNLOAD_URL_TITLE",
          "description": "IOS_TABLET_DOWNLOAD_URL_DESCRIPTION"
        }
    }
};

title和description字段现在可以直接引用翻译代币。接下来，我们将编写一个角度服务来检索此架构，但已经完成了翻译。我认为这是您MyService的意图：

.factory('Schema', function ($q, $translate) {
    return {
        elements: function() {
            var a = [];
            var result = angular.copy(schema);
            angular.forEach(result.properties, function (value, key) {
                a.push($translate([value.title, value.description]).then(
                    function (translations) {
                        value.title = translations[value.title];
                        value.description = translations[value.description];
                    }
                ));
            });
            return $q.all(a).then(function() { return result; });
        }
    }
})

让我们稍微打破一下：

var a = [];
var result = angular.copy(schema);

首先，我们设置一个数组a，我们将在其中放置一堆promises（一个用于模式中的每个字段），然后我们制作原始模式的副本，因为我们＆＃ 39;将要修改它。

angular.forEach(result.properties, function (value, key) {
    a.push($translate([value.title, value.description]).then(
        function (translations) {
             value.title = translations[value.title];
             value.description = translations[value.description];
        }
    ));
});

我们在这里重复遍历架构中的每个属性（只是此示例中的属性），请求对该属性的title和description字段进行翻译。由于$translate返回promises，因此我们需要附加一个.then处理程序，以便在承诺解析后将转换直接应用到模式的副本中。最后，承诺也附加到a数组上，其作业是记住我们正在运行的所有这些承诺的列表。

return $q.all(a).then(function() { return result; });

最后，我们等待所有这些承诺得到解决（即翻译全部完成），然后返回完全翻译的架构对象。

.controller('FormController',function ($scope, Schema) {

    Schema.elements().then(function (elements) {
        $scope.schema = elements;
    })
    $scope.model = {};
    $scope.form = [
        "IOS_TABLET_DOWNLOAD_URL"
    ];

});

实际控制器本身相当简单，与原始控制器差别不大。模板中的标记也不会改变。

为了好玩，请尝试将首选语言从en更改为de：

$translateProvider.preferredLanguage('de');

修改

如果要从其他文件或服务检索架构内容，请将elements方法替换为：

elements: function() { return $http.get('path/to/schema.json').then(function(response) { var a = []; var schema = response.data; angular.forEach(schema.properties, function (value, key) { a.push($translate([value.title, value.description]).then( function (translations) { value.title = translations[value.title]; value.description = translations[value.description]; } )); }); return $q.all(a).then(function() { return schema; }); }); }

Answer 2

我刚刚意识到，description属性是一个字符串。我没有理由看到它会打印任何其他内容。 JSON并不是真正意义上的函数，只是数据（否则它只是简单的JS）。只需传递要过滤的数据，并将其替换为最终结果。

在控制器中使用Angular转换，用于服务带来的数据

2 个答案: