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);
}

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

1 个答案: