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

Question

在 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 中另一个字段发生变化时设置一个字段的内部值

Fiddle(带有丑陋的$timeout解决方法):http://jsfiddle.net/TheSharpieOne/q1s7Lf7z/1/

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

Answer 1

当任何事情触发模型发生变化时，例如 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/