admin管理员组文章数量:1323723
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 .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;
})
}
}
})
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./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;
})
}
}
})
Share
Improve this question
edited Oct 25, 2014 at 18:04
M'sieur Toph'
asked Oct 25, 2014 at 17:08
M'sieur Toph'M'sieur Toph'
2,6761 gold badge24 silver badges37 bronze badges
1 Answer
Reset to default 11In 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 ment 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 ment.
Example
本文标签:
版权声明:本文标题:javascript - Use a $formatter on a object typed ngModel value with angular 1.2 worked, but not with version 1.3 - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742123725a2421842.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论