Custom directive using ngModelController not updating UI value

Question

I am trying to create a directive that formats a decimal value to a time value h:mm. If a user enters a time value the model should be updated with the decimal representation. If a user enters a decimal value his input should be replaced with the formatted value.

I am using the directive as follows:

<input type="text" hour-input ng-model="vm.hours"/>

Here is the relevant code:

app.directive('hourInput', hourInput);

function hourInput() {
  var directive = {
    link: link,
    restrict: 'A',
    require: 'ngModel'
  };

  return directive;

  function link(scope, element, attrs, ngModelController) {
    // model -> view
    ngModelController.$formatters.push(function (value) {
      return formatTime(value);
    });

    // view -> model
    ngModelController.$parsers.push(function (value) {
      var result;
      if (!/^\d?[\d,\.]*$/.test(value)) {
        result = parseTime(value);
      } else {
        result = parseFloat(value);
      }
      return result;
    });
  }
}

function parseTime(value) {
  // code removed for brevity
  return hours + minutes / 60;
}

function formatTime(value) {
  // code removed for brevity
  return result;
}

Here is the plunker. The interaction with the model is working. However the formatted time is not updated in the UI.

Please include the relevant parts of the code into your question instead of just providing a plunker link. That way your question stays valid even if the plunker link is dead — LionC
– LionC, Commented Jun 17, 2015 at 9:45
After updating the value in the controller, have you tried calling scope.$apply(); ? Im no Angular wizard, but I found that to work for me when updating values in a directive and the results not updating in the UI. — Louis Lewis
– Louis Lewis, Commented Jun 17, 2015 at 9:51
Can I suggest this link for a possible better explanation than I could offer. alexperry.io/angularjs/2014/12/10/… — Louis Lewis
– Louis Lewis, Commented Jun 17, 2015 at 10:04
You will see he is using setViewValue() and calling render(), I believe that render and apply eventually both will cause a digest to occur, which would update the value. As I said, I am no Angular wizard, just going from what I have battled with. — Louis Lewis
– Louis Lewis, Commented Jun 17, 2015 at 10:06

Kees de Kooter · Accepted Answer · 2015-06-17 13:06:27Z

1

ngModelController.$parsers parses your value with every keystroke. Since you do not know when the user is ready with entering the value, you can't really parse the value on every update. Assuming you want to allow the values

5
5.
5.5
5:30

the parser is not the way you want to go. I think that when you attach the function on the blur or change event you get the desired behavior.

Something like

element.bind('blur', function () {
      element.val(formatTime(element.val()));
    });

edited Jun 17, 2015 at 13:06

Kees de Kooter

7,2135 gold badges42 silver badges47 bronze badges

answered Jun 17, 2015 at 13:05

Andre Paap

7515 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Custom directive using ngModelController not updating UI value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related