完整的工作小提琴在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 数组中,它的任务是记住我们正在运行的所有这些 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; });
});
}