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>

目前不起作用，标签中的内容仍为输入值，未添加前缀字符串。任何帮助将不胜感激。

谢谢。

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>

AngularJS使用组件封装输入框

1 个答案: