Angularjs使用组件封装inputbox

Question

我想将一个inputBox封装到AngularJS组件中。在将输入传递给绑定模型数据之前，该组件会自动向输入添加一些前缀。例如前缀为"testPrefix"，当用户输入"ABC“时，对应的模型数据将为"testPrefixABC”。

我的代码是这样的：

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中的内容仍然是输入值，没有添加前缀字符串。任何帮助都将不胜感激。

提前谢谢。

Answer 1

上面代码使用指令而不是组件，

​

app.directive("inputEncaps", function(){
        return {
            require: "ngModel",
            link: function(scope, element, attrs, ngModel){
                ngModel.$parsers.push((viewValue) => {
                    if(viewValue && !viewValue.includes("textPrefix")) {
                        return "testPrefix" + viewValue;
                    } else {
                        return viewValue;
                    }
                });
    
                ngModel.$formatters.push((modelValue) => {
                    let model = modelValue && modelValue.length >= "textPrefix".length ? 
                    modelValue.substr("textPrefix".length) : modelValue;
                    return modelValue;
                });
            }
        };
    });

<input ng-model="inputVar" input-encaps/>

<label>{{inputVar}}</label>

​