javascript - 设置$ modelValue而不更改$ viewValue

在angular 1.2中，我需要能够更新$modelValue而不会影响$viewValue。我希望内部值是一个值，而用户看到的是另一个值。我遇到的问题是设置$modelValue最终导致在下一个摘要中设置$viewValue。我当前的解决方法是在下一个摘要中使用$timeout设置$viewValue。

//...

link: function(scope, elem, attrs, ctrl) {

    //...

    var setter = $parse(attrs.ngModel).assign;

    scope.$watch(attrs.otherValue, function(){
        var viewValue = ctrl.$viewValue;
        setter(scope, validate()); // validate returns undefined or value if valid
        $timeout(function(){
            if(ctrl.$viewValue !== viewValue){
                ctrl.$viewValue = viewValue;
                ctrl.$render();
            }
        });
    });

    //...

}

//...

基本上，我想在Angular 1.2中更改另一个字段时设置其中一个的内部值

小提琴（使用难看的$timeout解决方法）：http://jsfiddle.net/TheSharpieOne/q1s7Lf7z/1/

TL; DR
在$modelValue / $parser管道之外设置$formatter会更改$viewValue，我希望它仅更改$modelValue（内部值）。

最佳答案

当任何事情触发模型更改时（例如上例中的setter(scope, validate());），它将触发$formatters运行。 $formatters传递给$modelValue，并且可以返回将用于$viewValue的值。知道了这一点，您可以使用一个简单的函数，该函数仅在格式化程序中返回$viewValue。这样，以编程方式更新模型不会影响$viewValue，因此不会更改<inputs>中显示的值

ctrl.$formatters.push(formatter)

function formatter(modelValue){
    return ctrl.$viewValue;
}

对于问题中的示例，仅当$viewValue为$modelValue时，才想返回undefined。为此，您可以使用以下命令：

ctrl.$formatters.push(formatter)

function formatter(modelValue){
    return modelValue === undefined? ctrl.$isEmpty(ctrl.$viewValue)? undefined : ctrl.$viewValue : modelValue;
}

工作示例：http://jsfiddle.net/TheSharpieOne/q1s7Lf7z/17/