如何在AngularJS中使用输入字段实现模板组件

Question

我们在项目中使用AngularJS 1.6和bootstrap 4.3.1来构建UI。现在，我想构建一个简单的组件，该组件从根本上使使用引导程序的form-group元素更加容易。

我尝试过这样编写组件：

模板：

<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

如果您希望子组件中的模型更改也反映在其父组件中，则必须使用双向绑定。因此，您可以在组件中像这样设置绑定：

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

=表示双向绑定，而<表示单向绑定。直接看到此报价from the AngularJS documentation：

如果将对象传递给这样的组件-bindings: {item: '='}，并修改其属性之一，则更改将反映在父组件中。