Angular translate
HTML
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<script src="http://rawgithub.com/PascalPrecht/bower-angular-translate/master/angular-translate.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.1.9/css/xeditable.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.1.9/js/xeditable.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<p>
<strong>name:</strong>
<span>{{ name }}</span>
</p>
<p>
<strong>TEST:</strong>
<span>{{ 'TEST' | translate }}</span>
</p>
<p>
<strong>message:</strong>
<span>{{ message }}</span>
</p>
<a href="#"
editable-text="name"
onbeforesave="validate($data)"
onaftersave="save(name)">
{{ name }}
</a>
</div>
</div>
JavaScript
var myApp = angular.module('myApp', ['pascalprecht.translate', 'xeditable']);
myApp.config(function($translateProvider) {
$translateProvider.preferredLanguage('en');
$translateProvider.translations('en', {
TEST: 'This is test in English',
VALIDATION_MESSAGE: 'English: {{ fieldName }} should be between {{ min }} and {{ max }} characters long'
});
$translateProvider.translations('de', {
TEST: 'This is test in German',
VALIDATION_MESSAGE: 'German: {{ fieldName }} should be between {{ min }} and {{ max }} characters long'
});
});
myApp.controller('MyCtrl', function($scope, $translate) {
$scope.name = "yulian";
$scope.message = 'yes';
$scope.validate = function(name) {
if (name.length > 10) {
// If there wasn't support for multiple languages, just return a string
// return "Validation Message that doesn't need multiple languages";
$translate('VALIDATION_MESSAGE', { fieldName: 'name', min: 0, max: 10 }).then(function(translation) {
$scope.message = translation;
});
return $scope.message;
}
}
$scope.save = function(name) {
console.log('Saved: ' + name);
}
});