javascript - 在 Controller 中使用 Angular 翻译，用于服务带来的数据

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进行翻译，我正在像这样将服务注入(inject)我的 Controller

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 被打印为未处理的 View 中的描述

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

编辑

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

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

我该怎么做？

Answer 1

完整的工作 fiddle 位于 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，我们将在其中放入一堆 promise (一个用于模式中的每个字段)，并且我们制作原始模式的副本，因为我们将对其进行修改。

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

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

最后，我们等待所有这些 promise 都已解决(即翻译全部完成)，然后返回完全翻译的模式对象。

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

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

});

实际 Controller 本身很简单，与您原来的 Controller 没有太大区别。模板中的标记也没有改变。

为了好玩，尝试将首选语言从 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; });
    });
}