Use Angular translate to controller, for data transferred by service

Question

I have the following script:

I have a JSON file with this data:

"IOS_TABLET_DOWNLOAD_URL": { "type": "string", "minLength": "5", "title": "IOS_TABLET_DOWNLOAD_URL", "description": "$filter('translate')('configuration.IOS_TABLET_DOWNLOAD_URL')" }, 

The description field needs to be translated using Angular Translate , I enter the service to my controller like this

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

However, the $ filter is printed raw as a description in the view

"$ filter ('translate') ('configuration.IOS_TABLET_DOWNLOAD_URL')"

EDIT

I am using Angular Schema Form to create forms. So basically I have a view of something like this

 <div ng-controller="FormController"> <form sf-schema="schema" sf-form="form" sf-model="model"></form> </div> 

How can i do this?

Answer 1

The full working script is located at https://jsfiddle.net/dqhwzksx/ , it is a little longer, so I will consider the relevant sections here.

The main problem is that neither angular-schema-form nor angular-translate know what to do with "description": "$filter('translate')('configuration.IOS_TABLET_DOWNLOAD_URL')" their own. We need to do the translation ourselves.

First, our circuit no longer needs to process the filter:

 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 refer to broadcast markers. Then we are going to write an angular service that will retrieve this schema, but with translations already done. I think this was the intention 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; }); } } }) 

Let's break it down a bit:

 var a = []; var result = angular.copy(schema); 

First, we configure the array a , in which we are going to add a bunch of promises (one for each field in the scheme), and we make a copy of the original scheme, since we will be changing 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]; } )); }); 

Here we repeat each property in the schema (only in this example), requesting a translation for the title and description fields for this property. Since $translate returns promises, we need to attach a .then handler to apply translations directly to the copy of the schema after the promise is resolved. Finally, this promise is also added to the a array, whose task is to remember the list of all these promises that we run.

 return $q.all(a).then(function() { return result; }); 

Finally, we expect all these promises to be resolved (i.e., all translations are complete), and then 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 actual controller itself is quite simple and not much different from your original. The layout in the template also does not change.

For fun, try changing your preferred language from en to de :

 $translateProvider.preferredLanguage('de'); 

EDIT

If you want to get the contents of the schema from another 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; }); }); } 

Answer 2

I just realized the description property is a string. There is no reason that I can see him typing anything else. JSON is not really intended to carry functions, just data (otherwise it will be just JS). Just pass the data you want to filter and replace it with the end result.