Как сохранить отображаемое значение и внутреннее значение синхронизировано

Question

Я хотел бы знать, как наилучшим образом поддерживать постоянное значение строки отображения и фактическое внутреннее значение директивы.

В приведенном ниже коде у меня есть ввод времени, в котором пользователь может ввести строку, представляющую время («00:00»), директиву вычисляет фактическое значение и устанавливает его соответственно каждый раз, когда пользователь меняет строковое значение.

Однако, поскольку фактическое значение выставлено и может быть изменено другим компонентом, мне нужно каким-то образом сделать строковое значение согласованным с фактическим значением.

$ watch - это одно решение, но тогда мне нужно отключить часы, когда в методе onChange(). Поэтому мне интересно, есть ли лучший способ сделать это.

[EDIT]: Причина, по которой я использую ng-blur, связана с проверкой в ​​случае, если строковое значение не является допустимым форматом, оно возвращается обратно к фактическому значению.

Приветствия,

Jsfiddle: https://jsfiddle.net/minhnq013/v5rax0vk/3/

angular.module('myapp', []) 
    .directive('timeInput', function() { 
    return { 
     restrict: 'E', 
     template: '<input type="text" ng-model="ctrl.strValue" ng-blur="ctrl.onChange()"/><span ng-bind="ctrl.value"></span>', 
     scope: { 
      'value': '=' 
     }, 
     controller: Controller, 
     controllerAs: 'ctrl', 
     bindToController: true 
    }; 

    function Controller() { 
     var ctrl = this; 
     ctrl.value = ctrl.value || 0; 
     ctrl.strValue = "00:00"; 

     /** 
     * Called when the UI determine user input value has change, 
     * Set the internal value to be same as user input text value. 
     **/ 
     function onChange() { 
      var hour = ctrl.strValue.substr(0, 2); 
      var minute = ctrl.strValue.substr(3); 
      var dateObj = new Date(ctrl.value); 
      var regex = new RegExp("^\\d{2}:\\d{2}$"); 
      // If format is not valid, revert to last value 
      if (!ctrl.strValue.match(regex)) { 
       ctrl.strValue = ("0"+dateObj.getUTCHours()).slice(-2) + ":" + ("0"+dateObj.getUTCMinutes()).slice(-2); 
       return; 
      } 

      dateObj.setUTCHours(hour); 
      dateObj.setUTCMinutes(minute); 
      ctrl.value = dateObj.getTime(); 
     } 
     ctrl.onChange = onChange; 

     function filterText() { 

     } 
    } 
}); 

Answer 1

Осмотрев больше, я нашел этот пост и, кажется, чтобы быть правильным решением проблемы.

Создание новой директивы ограничивает атрибут и действует как фильтр для ввода текста.

http://stackoverflow.com/questions/15343068/using-angularjs-filter-in-input-element

Answer 2

Я хотел бы использовать фильтр. Если вы используете этот код в нескольких местах, вы можете использовать директиву, которая использует фильтр.

Фильтр будет отвечать за отображение отформатированных внутренних данных. Это устраняет необходимость хранения двух объектов по существу одного значения.

Кроме того, использование фильтра устранит необходимость в событиях onChange.

Для получения дополнительной информации о фильтрах см: https://scotch.io/tutorials/building-custom-angularjs-filters

Answer 3

Там много различных способов структурировать, но я хотел бы предложить, что вместо того, чтобы использовать часы, вы пытаетесь сохранить его событийным. Я частично основываю это на вашем комментарии к коду, чем ваш вопрос Called when the UI determine user input value has change, но похоже, что вы можете просто подумать о неправильном событии для того, чего вы пытаетесь достичь. Как насчет того, чтобы сменить ng-blur на что-то вроде ng-change, чтобы вы выполняли функции при каждом изменении, чтобы синхронизировать вашу логику. Вы можете легко соединить это с параметрами модели для некоторой довольно удивительной функциональности, например, если вы хотите, чтобы замедлить его до половины второго обновления как: ng-model-options="{ debounce: { 'default': 500 } }"

template: '<input type="text" ng-model="ctrl.strValue" ng-change="ctrl.onChange()"/><span ng-bind="ctrl.value"></span>',