如何正确构建角度 1.5 文本框组件

How to properly build an angular 1.5 text box component?

本文关键字：文本 组件 何正确 构建      更新时间：2023-09-26

我的问题几乎是不言自明的。
我建立了一个文本框： 

<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将更新容器）？
- 是开销吗？（我认为不是，但我可能是错的）
我正在寻找通用和干净的东西.

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

模板：

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

检测控制器中的更改：

$ctrl.onModelChange = function() {
    console.log($ctrl.model);
}
相关文章：