使用一个对象类型ngModel值具有角1.2工作了$格式化，但与1.3版 [英] Use a $formatter on a object typed ngModel value with angular 1.2 worked, but not with version 1.3

问题描述

这code。与角1.2.26工作，但不与角1.3.0.rc5（或我想任何的1.3.x版本）。

我发现这个问题 https://github.com/angular/angular.js/问题/ 9218 对角的github上，但我不熟悉GitHub的接口，如果错误被确认或我想不通，如果是正常现象，如果它已被固定或没有;如果是，我应该采取什么样的版本。

JSFiddles：

• 具有角v1.2.26，ngModel为研究对象


• 具有角v1.3.0.rc5，ngModel为研究对象

对于每一个，我希望在加载页面时有我的标签输入。它适用于第一个，但不是对于第二

和看控制台查看被传递给格式化什么样的价值。

HTML

 ＆LT; D​​IV NG控制器=CTRL为c＆GT;
    ＆LT;输入我的-DIR NG模型=c.foobar/＆GT;
    ＆LT; pre＆GT; {{c.foobar | JSON}}＆LT; / pre＆GT;
＆LT; / DIV＆GT;
 

JS：

  VAR应用= angular.module（'应用'，[]）;app.controller（'CTRL'，函数（）{
    this.foobar = {
        值：'我的价值，
        标签：'我的标签
    }
}）
.directive（'MYDIR'，函数（）{
    返回{
        限制：'A'，
        要求：'ngModel'，
        链接：功能（范围，ELT，ATTRS，modelCtrl）{            //转换的观点 - ＆GT;模型
            modelCtrl。$ parsers.unshift（函数（值）{
                的console.log（'值：'，值）;
                返回{标签：值，值：值};
            }）            //转换模式 - ＆gt;查看
            modelCtrl。$ formatters.unshift（功能格式化（modelValue）{
                的console.log（'modelValue：'，modelValue）;
                返回modelValue.label;
            }）
        }
    }
}）
 

解决方案

在1.3你应该做这样的（这也将在1.2工作）：

  .directive（'MYDIR'，函数（）{
    返回{
        限制：'A'，
        要求：'ngModel'，
        链接：功能（范围，ELT，ATTRS，modelCtrl）{            //转换的观点 - ＆GT;模型
            modelCtrl。$ parsers.push（函数（值）{
                的console.log（'值：'，值）;
                返回{标签：值，值：值};
            }）            //转换模式 - ＆gt;查看
            modelCtrl。$ formatters.push（功能格式化（modelValue）{
                的console.log（'modelValue：'，modelValue）;
                返回modelValue.label;
            }）
        }
    }
}）
 

因为如果你不印字你的 $格式 130，那么你会得到模型的字符串化值，如果你想拥有访问模型的非字符串化的价值，你必须把你的 $格式末（推）。

我知道，这违背伊戈尔高塔的这条评论。

  

断裂的变化是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

这篇关于使用一个对象类型ngModel值具有角1.2工作了$格式化，但与1.3版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！