设置 $modelValue 而不改变 $viewValue [英] Set $modelValue without changing $viewValue

问题描述

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

In angular 1.2 I need to be able to update the $modelValue without affecting the $viewValue. I want the internal value to be one value, while what the user sees to be another. The problem I am having is setting the $modelValue ends up setting the $viewValue on the next digest. My current work-around is using $timeout to set the $viewValue in the next digest.

//...

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 中发生变化时，我想设置一个的内部值

Basically, I want to set the internal value of one with when another field changes in Angular 1.2

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

Fiddle (with ugly $timeout workaround): http://jsfiddle.net/TheSharpieOne/q1s7Lf7z/1/

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

TL;DR
Setting $modelValue outside of $parser/$formatter pipelines changes $viewValue, where I am wanted it to only change $modelValue (the internal value).

推荐答案

当任何东西触发模型改变时，比如上面例子中的 setter(scope, validate()); ，它会触发 $formatters 运行.$formatters 被传递给 $modelValue 并且可以返回一个将用于 $viewValue 的值.知道了这一点，您可以使用一个简单的函数，它只返回格式化程序中的 $viewValue.这样，以编程方式更新模型将不会影响 $viewValue，因此不会更改

When anything triggers the model to change, something like setter(scope, validate()); in the example above, it will trigger the $formatters to run. The $formatters are passed the $modelValue and can return a value that will be used for the $viewValue. Knowing this, you can use a simple function that just returns the $viewValue in the formatter. With this, updating the model programmatically will not affect the $viewValue, and thus not change the value that appears in <inputs>

ctrl.$formatters.push(formatter)

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

对于问题中的示例，仅当 $modelValue 为 undefined 时，您才需要返回 $viewValue.为此，您可以使用它:

For the example in the question, you would want to return the $viewValue only when the $modelValue is undefined. For that you can use this:

ctrl.$formatters.push(formatter)

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

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

这篇关于设置 $modelValue 而不改变 $viewValue的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！