使用 $formatter 在对象类型 ngModel 值上使用 angular 1.2 工作，但不适用于 1.3 版 [英] Use a $formatter on a object typed ngModel value with angular 1.2 worked, but not with version 1.3

问题描述

此代码适用于 angular-1.2.26，但不适用于 angular-1.3.0.rc5(或我尝试过的任何 1.3.x 版本).

我发现了这个问题 https://github.com/angular/angular.js/问题/9218 在 angular 的 github 上，但我不熟悉 github 界面，我无法确定错误是否已确认或行为是否符合预期，是否已修复；如果是，我应该使用哪个版本.

JSFiddle:

• 使用 angular v1.2.26，ngModel 作为对象
• 使用 angular v1.3.0.rc5，ngModel 作为对象

对于每个，我希望在加载页面时在输入中包含我的标签".它适用于第一个，但不适用于第二个.

并查看控制台以查看传递给格式化程序的值.

HTML:

<input my-dir ng-model="c.foobar"/><pre>{{c.foobar |json}}</pre>

JS:

var app = angular.module('app', []);app.controller('ctrl', function(){this.foobar = {价值:'我的价值'，标签:'我的标签'}}).directive('myDir', function(){返回 {限制:'A'，要求:'ngModel'，链接:函数(范围，elt，attrs，modelCtrl){//转换视图 -> 模型"modelCtrl.$parsers.unshift( 函数(值){console.log('Value:', value);返回{标签:值，值:值}；})//转换模型 -> 视图"modelCtrl.$formatters.unshift(function formatter(modelValue){console.log('modelValue:', modelValue);返回模型值.标签；})}}})

解决方案

在 1.3 中你应该这样做(这也适用于 1.2):

.directive('myDir', function(){返回 {限制:'A'，要求:'ngModel'，链接:函数(范围，elt，attrs，modelCtrl){//转换 "view ->模型"modelCtrl.$parsers.push(函数(值){console.log('Value:', value);返回{标签:值，值:值}；})//转换模型->"查看"modelCtrl.$formatters.push(function formatter(modelValue){console.log('modelValue:', modelValue);返回模型值.标签；})}}})

因为如果你在1.3中unshift你的$formatter，那么你将得到模型的字符串化值，如果你想访问非字符串化的值模型，你必须把你的 $formatter 放在最后(push).

我知道这与 Igor Minar 的此评论相矛盾.

<块引用>

重大变化是传递给格式化程序的 viewValue 将是格式化的modelValue 的toString 版本.所以如果有任何习俗格式化程序在默认格式化程序之后执行，他们会看到字符串值的版本.如果任何格式化程序需要访问该值在字符串化之前，格式化程序应通过以下方式注册$formatters.unshift(customFormatter).

但是在那条评论之后事情发生了变化.

示例

This code worked with angular-1.2.26, but not with angular-1.3.0.rc5 (or any 1.3.x versions I tried).

I found this issue https://github.com/angular/angular.js/issues/9218 on angular's github, but I am not familiar with github interface and I cannot figure out if the bug is confirmed or if the behavior is expected, if it has been fixed or not; and if yes, what version should I take.

JSFiddles :

• with angular v1.2.26, ngModel as object
• with angular v1.3.0.rc5, ngModel as object

For each, I expect to have 'my label' in the input when loading the page. It works for the first one, but not for the second.

And look at the console to see what value is passed to the formatter.

HTML :

<div ng-controller="ctrl as c">
    <input my-dir ng-model="c.foobar" />
    <pre>{{c.foobar | json}}</pre>
</div>

JS :

var app = angular.module('app', []);

app.controller('ctrl', function(){
    this.foobar = {
        value : 'my value',
        label : 'my label'
    }
})


.directive('myDir', function(){
    return {
        restrict :'A',
        require:'ngModel',
        link : function(scope, elt, attrs, modelCtrl){

            // conversion "view -> model"
            modelCtrl.$parsers.unshift( function(value){
                console.log('Value:', value);
                return {label:value, value:value};
            })

            // conversion "model -> view"
            modelCtrl.$formatters.unshift(function formatter(modelValue){
                console.log('modelValue:', modelValue);
                return modelValue.label;
            })
        }
    }
})

解决方案

In 1.3 you should be doing it like this (which will also work in 1.2):

.directive('myDir', function(){
    return {
        restrict :'A',
        require:'ngModel',
        link : function(scope, elt, attrs, modelCtrl){
            
            // conversion "view -> model"
            modelCtrl.$parsers.push( function(value){
                console.log('Value:', value);
                return {label:value, value:value};
            })
            
            // conversion "model -> view"
            modelCtrl.$formatters.push(function formatter(modelValue){
                console.log('modelValue:', modelValue);
                return modelValue.label;
            })
        }
    }
})

Because if you unshift your $formatter in 1.3, then you will get the stringified value of the model, if you want to have access to the non stringified value of the model, you will have to put your $formatter at the end (push).

I know that this contradicts this comment of Igor Minar.

The breaking change is that the viewValue passed into formatters will be a toString version of the formatted modelValue. So if any custom formatters execute after the default formatter, they'll see the string version of the value. If any formatter needs access to the value before it was stringified, the formatter should be registered via $formatters.unshift(customFormatter).

But things changed after that comment.

Example

这篇关于使用 $formatter 在对象类型 ngModel 值上使用 angular 1.2 工作，但不适用于 1.3 版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！