Angular translate

by Nikolay Semenov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.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>
    <p>
      <a href="#" editable-text="name" onbeforesave="validateName($data)" onaftersave="save(name)">
          {{ name }}
      </a>

    </p>
  </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, $compile, $timeout) {
  $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.validateName = function(name) {
    if (name.length > 10) {
      console.log('fail')
      var element = $compile('<span translate="VALIDATION_MESSAGE"></span>')($scope)[0];
      return $timeout(function() {
        $scope.$apply();
        return element.textContent
      }, 10);
    }
  };


  $scope.save = function(name) {
    console.log('Saved: ' + name);
  }
});