angular - перевести ng-модель, которая находится внутри шаблона директивы

Question

У меня есть одна директива, которая создает динамический контроль. Шаблон директивы, как показано ниже

"<div class=\"form-group\">\n <input type='text' ng-model=\"value|translate\" class='form-control'/>\n </div>"

где в моей директиве у меня есть:

scope.value = 'VALUE';

и в разделе конфигурации у меня есть:

.config(['$translateProvider', function ($translateProvider) {
    $translateProvider.translations('en', {
        'VALUE' : 'Some value'
    });

    $translateProvider.translations('ar', {
        'VALUE': 'بعض القيمة',
    });

    $translateProvider.preferredLanguage('en');
}])

но это дает неназначенную ошибку: Error: [ngModel:nonassign]

как бы то ни было, применяя фильтр на scope.value в директиве и удаление фильтра перевода из ng-модели решает проблему.

$filter('translate')(scope.value);

и меняется ng-model='value|translate' в ng-model=value

Но когда пользователь меняет язык, он не будет переводить это предварительно заполненное значение текстового поля, потому что он назначил его, переведя его как значение и фильтр не применяется к нему.

вот jsfiddle

Answer 1

Как говорит MoLow: вы не можете назначить отфильтрованное выражение для ng-Model;
Угловой перевод есть некоторые события; Вы можете использовать его для изменения значения модели; Просто:

$rootScope.$on('$translateChangeSuccess', function(){
    scope.value = $filter('translate')('VALUE');
};

Не забудьте добавить $rootScope Вашей директиве;

Пример;

Answer 2

Ошибка означает, что вы не можете назначить отфильтрованное выражение для ng-Model:

https://docs.angularjs.org/error/ngModel/nonassign

то, что вы должны сделать, это отфильтровать выражение в функции директивы link, используя часы, чтобы изменить его, когда пользователь выбирает другой язык:

scope.$watch(function() { return $filter('translate')('VALUE'); }, function(newVal){
    scope.value = newVal;
});