使用 Angular 在控制器内翻译,用于服务带来的数据
Using Angular translate within controller, for data brought by service
我有以下场景:
我有一个包含这种数据的 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>
我该怎么做?
我刚刚意识到,description
属性 是一个字符串。我没有理由认为它会打印任何其他内容。 JSON 并不是真正意味着携带功能,只是数据(否则它只是普通的 JS)。把你要过滤的数据传过去,替换成最终结果就可以了。
完整的 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
,我们将在其中放入一堆承诺(架构中的每个字段一个),然后我们制作原始架构的副本,因为我们'我会修改它。
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
returns 承诺,我们需要附加一个 .then
处理程序,以便在承诺解决后将翻译直接应用到模式副本中。最后,promise 是 also 附加到 a
数组,它的工作是记住所有这些 promise 的列表,我们是 运行.
return $q.all(a).then(function() { return result; });
最后,我们等待所有这些承诺都已解决(即翻译全部完成),然后 return 完全翻译的模式对象。
.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; });
});
}
我有以下场景:
我有一个包含这种数据的 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>
我该怎么做?
我刚刚意识到,description
属性 是一个字符串。我没有理由认为它会打印任何其他内容。 JSON 并不是真正意味着携带功能,只是数据(否则它只是普通的 JS)。把你要过滤的数据传过去,替换成最终结果就可以了。
完整的 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
,我们将在其中放入一堆承诺(架构中的每个字段一个),然后我们制作原始架构的副本,因为我们'我会修改它。
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
returns 承诺,我们需要附加一个 .then
处理程序,以便在承诺解决后将翻译直接应用到模式副本中。最后,promise 是 also 附加到 a
数组,它的工作是记住所有这些 promise 的列表,我们是 运行.
return $q.all(a).then(function() { return result; });
最后,我们等待所有这些承诺都已解决(即翻译全部完成),然后 return 完全翻译的模式对象。
.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; });
});
}