Как реализовать компонент шаблона с полем ввода в AngularJS

Question

Мы используем AngularJS 1.6 и загрузчик 4.3.1 в нашем проекте для создания пользовательского интерфейса. Теперь я хочу создать простой компонент, который в основном облегчает использование элементов группы начальной загрузки начальной загрузки.

Я пытался написать такой компонент:

Шаблон:

<div class="form-group">
<label
    for="input-{{::$ctrl.name}}"
    class="input-label mb-1"
    ng-class="{'disabled': $ctrl.isDisabled, 'required': $ctrl.isRequired}"
    ng-bind="::$ctrl.label">
</label>
<input
    tabindex="{{$ctrl.tabindex}}"
    ng-readonly="$ctrl.isReadonly"
    ng-model="$ctrl.model"
    type="{{::$ctrl.type}}"
    id="input-{{::$ctrl.name}}"
    class="form-control"
    ng-class="{'negative': $ctrl.hasNegativeStyle}"
    ng-required="$ctrl.isRequired">

JavaScript:

(function () {
'use strict';

var component = {
    templateUrl: 'app/components/bootstrap/form-group-input/form-group-input.component.html',
    bindings: {
        name: '@',
        label: '@',
        model: '<',
        isReadonly: '<',
        isRequired: '<',
        isDisabled: '<',
        hasNegativeStyle: '<',
        type: '@',
        tabindex: '@'
    }
};

angular
    .module('collphir.common')
    .component('cwpFormGroupInput', component);
})();

Проблема сейчасэто модель привязки. Изменение входных данных в компоненте не повлияет на модель родителя, потому что это односторонняя привязка. Но как я могу достичь этого, не возвращаясь к старому двустороннему связыванию (которое нам не нужно, потому что мы хотим в будущем перейти на Angular)?

Answer 1

Я нашел способ добиться того, что хочу:

JavaScript:

(function () {
'use strict';

var component = {
    templateUrl: 'app/components/bootstrap/form-group-input/form-group-input.component.html',
    bindings: {
        name: '@',
        label: '@',
        model: '<',
        isReadonly: '<',
        isRequired: '<',
        isDisabled: '<',
        hasNegativeStyle: '<',
        type: '@',
        tabindex: '@',
        modelChange: '&'
    }
};

angular
    .module('collphir.common')
    .component('cwpFormGroupInput', component);
})();

HTML-шаблон:

<div class="form-group">
<label
    for="input-{{::$ctrl.name}}"
    class="input-label mb-1"
    ng-class="{'disabled': $ctrl.isDisabled, 'required': $ctrl.isRequired}"
    ng-bind="::$ctrl.label">
</label>
<input
    tabindex="{{$ctrl.tabindex}}"
    ng-readonly="$ctrl.isReadonly"
    ng-model="$ctrl.model"
    type="{{::$ctrl.type}}"
    id="input-{{::$ctrl.name}}"
    class="form-control"
    ng-class="{'negative': $ctrl.hasNegativeStyle}"
    ng-change="$ctrl.modelChange({$event: $ctrl.model})"
    ng-required="$ctrl.isRequired">
</div>

Пример использования этого компонента:

<cwp-form-group-input
    class="mb-2"
    name="brutto"
    label="{{$ctrl.text.labelBrutto}}"
    model="$ctrl.sVEinkommen"
    is-readonly="$ctrl.isReadonly"
    type="number"
    model-change="$ctrl.sVEinkommen=$event"
    tabindex="1">
</cwp-form-group-input>

Answer 2

Если вы хотите, чтобы изменение модели в дочернем компоненте также отражалось в его родительском компоненте, необходимо использовать двустороннюю привязку. Таким образом, в вашем компоненте вы можете установить привязку следующим образом:

bindings: {
    // ...
    model: '=',
    // ...
}

= обозначает двустороннюю привязку, а < обозначает одностороннюю привязку. Смотрите эту цитату непосредственно из документации AngularJS :

Если вы передадите объект такому компоненту - bindings: {item: '='} и измените одно из его свойств, изменение будетотражено в родительском компоненте.