Question

我在$ scope中有一个字段（我在angularjs术语中是新的），它在html中链接：

<input type="text" ng-model="phone" format-phone/>

Format-phone是一个自定义指令，可为视图值添加解析器：

.directive('formatPhone', () => ({
    require: '?ngModel',
    link: (scope, elem, attrs, ctrl) => {
        if (!ctrl) return;
        ctrl.$parsers.unshift(viewValue => {
            var phone = viewValue.substring(0, 12).replace(/* some custom replace */);
            elem.val(phone.replace(/* another custom replace */)));
            return phone;
        });
    }
}))

完美无缺，并按预期修改模型和视图值。我想在控制器代码中为模型添加默认值，所以我添加了这一行：

$scope.phone = '1112223344';

但是这个值不是由指令中的解析器处理的，并且在我第一次编辑之前保持原始状态。我可以在没有编写另一个初始化指令的情况下从控制器显式调用解析器的视图/模型值或者我可以设置将由解析器自动处理的视图值？

UPD：感谢@potatopeelings我做得更好，但这个解决方案看起来很糟糕。我有什么替代方法可以从解析器调用formatter吗？

ctrl.$formatters.unshift(modelValue => {
    modelValue; // 123456
    return modelValue.replace(...); // View value is now (123)45-6 
});
ctrl.$parsers.unshift(viewValue => {
    var phone = viewValue.replace(...); // (123)456 -> 123456
    elem.val(ctrl.$formatters[0](phone)); // Element value is now (123)45-6
    return phone; // Model value is now 123456
});

Answer 1

解析器用于将视图值转换为模型值，格式化程序用于将模型值转换为视图值。

您需要插入一个格式化程序，将您的（初始化的）模型值转换为您需要的视图值。

在$ scope中设置值并在其上使用$ parsers

1 个答案: