Use angular-translate to set placeholder value onblur

Question

I am new to Angular. Implementing localization in the project. I've got many inputs and I must translate placeholders. In HTML I have something like this

<input  type="email" placeholder="{{ 'TRANSLATION_KEY' | translate }}" onfocus="this.placeholder=''" onblur="this.placeholder='{{ 'TRANSLATION_KEY' | translate }}'" required>

But this part of the code doesn't work:(

onblur="this.placeholder='{{ 'TRANSLATION_KEY' | translate }}'"

How to set translated value to placeholder onblur? I'll appreciate any help!

Answer 1

This is a good approach to the problem JSFiddle:

HTML:

<div ng-app="myApp" ng-controller="myCtrl">
    <input  type="email" placeholder="{{placeholder}}" ng-focus="setPlaceholder()" ng-blur="setPlaceholder('TRANSLATION_KEY')" required>
</div>

JS:

angular.module('myApp', [])
.controller('myCtrl', function ($scope, $filter) {
    $scope.placeholder = $filter('translate')('TRANSLATION_KEY');

    $scope.setPlaceholder = function (data) {
        $scope.placeholder = $filter('translate')(data);
    };
})
.filter('translate', function () {
    return function (data) {
        return data;
    };
});