如何正确构建一个有角度的1.5文本框组件？

Question

我的问题几乎可以自我解释。
我已经建立了一个文本框：

<qn-textbox placeholder="" 
            label="{{$ctrl.resources.lbl_PersonalId}}"></qn-textbox>

组件看起来像这样：

(function () {
    'use strict';

    var qnTextbox = {
        bindings: {
            placeholder: '@',
            label: '@'
        },
        template: `
            <div clas="row">
                <div class ="col-xs-12 col-sm-4 col-md-3">
                    <span data-ng-bind="$ctrl.label"></span>
                </div>
                <div class ="col-xs-12 col-sm-8 col-md-9">
                    <input type="text" placeholder="{{$ctrl.placeholder}}" />
                </div>
            </div>
        `,
        controller: function () {
            var ctrl = this;
        }
    };

    angular
      .module('app.components.core.qnTextbox')
      .component('qnTextbox', qnTextbox);

})();

我正在寻找正确的方法来鼓起泡沫/在文本更改时通知家长。
-我应该使用某种文本容器，然后确保每个文本框组件都将其作为父容器，以便可以使用require（然后$ onChange将更新容器）吗？
-有开销吗？ （我认为不是，但我可能是错的）
我正在寻找通用且干净的东西。

Answer 1

您应该使用ng-model来存储数据，并使用ng-change来检测对表单数据的更改。

---

模板：

<input ng-model="$ctrl.model" ng-change="$ctrl.onModelChange()"></input>

---

检测您的控制器中的更改：

$ctrl.onModelChange = function() {
    console.log($ctrl.model);
}