If you want to see the full working fiddle, you can visit https://jsfiddle.net/dqhwzksx/. However, I will break down the important sections here for easier understanding.
The issue arises because both angular-schema-form and angular-translate do not recognize
"description": "$filter('translate')('configuration.IOS_TABLET_DOWNLOAD_URL')"
on their own. We need to handle the translation ourselves.
Firstly, our schema no longer needs to handle the filter internally:
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"
}
}
};
The title and description fields can now directly reference the translation tokens. Next, we will create an angular service that fetches this schema with translations already applied. This seems to be the purpose of your 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; });
}
}
})
Breaking it down:
var a = [];
var result = angular.copy(schema);
We initiate an array a to store promises (one for each field in the schema) and make a copy of the original schema since we will modify it.
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];
}
));
});
We iterate over each property in the schema, request translations for the title and description fields, and update the schema copy with the translations. Promises are added to the a array to keep track of translations.
return $q.all(a).then(function() { return result; });
Finally, we wait for all promises to resolve (translations completed) and return the fully translated schema object.
.controller('FormController',function ($scope, Schema) {
Schema.elements().then(function (elements) {
$scope.schema = elements;
})
$scope.model = {};
$scope.form = [
"IOS_TABLET_DOWNLOAD_URL"
];
});
The controller remains simple, similar to the original, and the template markup remains unchanged.
For a change, try switching the preferred language to de from en:
$translateProvider.preferredLanguage('de');
EDIT
If you wish to fetch the schema from an external file or service, replace the elements method with something like:
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; });
});
}