As You can see in my HTML I want to take my Data according to my current locale, and I have custom translation file enTranslation, which is given.
PROBLEM :
I am not able to see the values on browser page, when I am using
{{ translations[key] }}OR{{ translation.key }}
Please HELP me understand what is needed to be done to make this work.
I have 3 files in js Directory, Given Code Below:
My HTML file
<!DOCTYPE html>
<html>
<head>
<script src="js/angular_1.4.2.min.js"></script>
<script src="js/prax_controller.js"></script>
<script src="js/enTranslations.js"></script>
<meta charset="UTF-8">
<title>Prax Local</title>
</head>
<body ng-app="prxApp" ng-controller="prxController">
<div>
List
<ul class="d1" ng-repeat="(key, value) in eventHistories">
<li class="d1k">
<!-- {{ translations.key }}: {{ value }}% -->
{{ translations[key] }} : {{ value }}%
</li>
</ul>
</div>
</body>
</html>
var translations = {
"Device Status":'Device Status',
"Device Temperature":'Device Temperature',
};
var prxApp = angular.module('prxApp', []);
prxApp.controller('prxController', ['$scope', function($scope) {
$scope.init = function()
{
$scope.eventHistories = {
"Device Status":0,
"Device Temperature":0,
};
};
$scope.init();
}]);
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js
you can attach the translations on the $rootScope then you will be able to get the object in any template. A rough picture that comes in mind according to your requirement could be this.
put this somewhere in your main angular bootstrapping module's run method or you can put it in resolve method of your first controller.
angular.module('app').config(function () {
})
.run(function ($rootScope, $state, $stateParams, $http) {
// Get language based on browser settings
var lang = navigator.language;
// fetch translations from server
$http.get('URL_TO_FETCH_TRANSLATION/' + lang)
.success(function (data) {
$rootScope.translations = data;
});
});
In any of your template.
<li class="d1k" ng-repeat="(key, value) in eventHistories">
{{ translations[key] }} : {{ value }}
</li>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments