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-model中删除翻译过滤器解决问题。

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

并将ng-model='value|translate'更改为ng-model=value

但是当用户更改语言时，它不会转换文本框的预填充值，因为它通过将其转换为值来分配它，并且不对其应用过滤器。

这里是jsfiddle

Answer 1

正如MoLow所说：你不能将过滤后的表达式分配给ng-Model;
Angular翻译有一些events;您可以使用它来改变模型值;只是：

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

Dnt忘记向你的指令添加$rootScope;

Example;

Answer 2

错误意味着您无法将过滤后的表达式分配给ng-Model：

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

你应该做的是过滤指令链接函数中的表达式，当用户选择另一种语言时使用watch来更改它：

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

angular - 翻译ng-model，它位于指令

2 个答案: