Angularjs использует компонент для инкапсуляции поля ввода

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>