I have successfully implemented a multi-language concept in my application, but I am facing an issue where the language (.json) file is being loaded for every field. As a result, the application takes a longer time to load. My requirement is to load the .json file only once to fetch all the data. How can I achieve this in AngularJS? Thank you in advance for your assistance.
Feel free to check out the link below as well:
http://plnkr.co/edit/PYZxcI5yTNuA0fEern9s?p=preview
var language = 'en';
app.directive('telBasictext', ['$http', 'teli18nservice',
function($http, teli18nservice) {
return {
restrict: 'AEC',
require: 'ngModel',
scope: {
ngModel: '=',
},
template: '<div class="form-group" > ' +
'<label > {{ setvalue }} </label> ' +
'<div > <input type="{{ textboxtype }}" ng-model="ngModel" ></div></div>',
link: function(scope, iElement, iAttrs, ngModelController) {
var collecton = iAttrs.getString;
var splitValues = collecton.split(",");
var language = splitValues[0]; // Language EN or Fr
var labelName = splitValues[1]; // Label Name
var moduleName = splitValues[2]; // Module Name (global or local)
teli18nservice.getdata(moduleName).success(function(data) {
scope.setvalue = data[labelName];
})
.error(function(error) {
scope.setvalue = "No Label";
});
}
};
}
]);