前景提要
我想用 component 封装一个 inputbox 文本输入框,还是需要用 ng-model 去绑定变量,然而绑定变量得到的值需加上某些前缀。比如在输入框内输入 "abcd" , 对应的 model 变量会被处理为 ” textPrefixabcd"
Component 我是这样写的: angular.module('').component('dummyBox', { bindings: { ngModel: '=' }, require: { ngModelCtrl: 'ngModel' }, template: '<span><input type="text" ng-model="$ctrl.ngModel" /></span>', controller: function() { $ctrl.$onInit = () => { $ctrl.ngModelCtrl.$parsers.push((viewValue) => { if(viewValue) return "testPrefix" + viewValue; }); $ctrl.ngModelCtrl.$formatters.push((modelValue) => { return modelValue.substr("textPrefix".length); }); } } });
然后在外部使用时这样: <dummy-box ng-model="outScopeVar"></dummy-box> <label>{{outScopeVar}}</label>
为什么不对呢,label 打印出来的永远是实际输入的值。是 ngModel 绑定错了,还是我对$formatters 和 $parsers 的理解不对?求前端大佬们指点