我有以下场景:
我有一个包含这种数据的 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>
我该怎么做?
最佳答案
完整的工作 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; });
});
}
关于javascript - 在 Controller 中使用 Angular 翻译,用于服务带来的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34006330/