在控制器中使用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进行翻译,我正在将服务注入到我的控制器中

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，在其中放入一堆承诺（模式中的每个字段一个），并且我们复制原始模式，因为我们将修改它。

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数组上，该数组的作用是记住我们正在运行的所有这些promise 的列表。

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; });
    });
}