6

我有以下情况：

我有一个包含此类数据的 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 被打印为视图中的描述未处理

"$filter('translate')('configuration.IOS_TABLET_DOWNLOAD_URL')"

编辑

我正在使用Angular Schema Form来生成表单。所以基本上我有这样的看法

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

我该怎么做？

4

2 回答 2

3

完整的工作小提琴位于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可以直接引用翻译标记。接下来，我们将编写一个 Angular 服务来检索这个模式，但已经进行了翻译。我认为这是您的意图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，我们将在其中放入一堆承诺（模式中的每个字段一个），并且我们复制原始模式，因为我们将对其进行修改。

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，我们需要附加一个处理程序以将翻译直接应用到模式的副本中。.then最后，promise也被附加到a数组中，它的任务是记住我们正在运行的所有这些 promises 的列表。

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; });
    });
}
于 2015-12-15T05:14:12.563 回答
0

我刚刚意识到，该description属性是一个字符串。我没有理由看到它会打印其他任何东西。JSON 并不真正意味着承载功能，只是数据（否则它只是普通的 JS）。只需传递要过滤的数据并将其替换为最终结果即可。

于 2015-11-30T20:13:53.570 回答