Как правильно построить угловой текстовый компонент 1.5?

Question

Как правильно построить угловой текстовый компонент 1.5?

0

Мой вопрос в значительной степени объяснительный.
Я создал текстовое поле:

<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 будет обновлять контейнер)?
- Это накладные расходы? (я думаю, нет, но я могу ошибаться)
Я ищу что-то общее и чистое.

gilad 05 июль 2016, в 16:20

Источник

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Jeffrey Roosendaal · Answer 1 · 2016-11-17T12-19-00.000Z

Вы должны использовать ng-model для хранения данных и использовать ng-change для обнаружения изменений данных формы.

Шаблон:

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

Обнаружить изменение в вашем контроллере:

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