-1

I really don't fully understand how these things work. The docs are clear enough to get the general idea, but I can't figure out how they are called.

I have this issue where I have a Unix timestamp (in seconds) that needs to display as a readable date in the UI, but be saved to the server in it's original format. Previously I was using the jQuery UI datepicker, and made a custom directive with $formatters and $parsers that would take care of the transformations. Worked great.

Then I decided to ditch the jQuery to lighten the payload of the app, and so have switched to using ngQuickDate ( https://github.com/adamalbrecht/ngQuickDate ) which is great actually.

BUT it has it's own pipeline of $formatters and $parsers, and relies on a js Date object residing in the model. :p

I've been banging my head on this all day trying to figure out if my directive could play nice with this other one. It stands to reason that I should be able to put my directive there and have my parsing and formatting functions inject into the pipeline and work as expected, except that the date picker directive directly references $modelValue in several places and so actually bypasses the pipeline as far as I can tell.

Is there a way to make reference the value as transformed by my formatter, rather than the direct modelValue? I tried viewValue but that didn't work. :p

I don't really understand how the formatters and parsers get invoked I guess. That's my main question.

Askdesigners
  • 419
  • 5
  • 15
  • Why not use the built in date filter https://docs.angularjs.org/api/ng/filter/date – Christopher Marshall Dec 04 '14 at 15:17
  • @Christopher Marshall: he doesn't want a filter, but a directive (with a date/time picking template)... – MarcoS Dec 04 '14 at 16:07
  • If your `formatter` runs before the plugin formatter, the plugin will get what you have set. Therefore order is important. Try to register it before any other formatter. The directive priority can help here. If i remember correctly if directive has high priority it's link function executes last, but i can be wrong. – Chandermani Dec 04 '14 at 16:09
  • @MarcoS I completely misinterpreted his question then. ={ – Christopher Marshall Dec 04 '14 at 16:09
  • @Askdesigners: did you try carefully reading manual (https://docs.angularjs.org/guide/directive)? And, you could also find this post (http://cameronspear.com/blog/how-cool-are-formatters-and-parsers/) interesting... – MarcoS Dec 04 '14 at 16:10
  • @MarcoS ya I have read it. It's just not too clear about how to go about accessing the model from within the directive. For instance in my directive, I only have a formatter and a parser, and so get the value I need as the argument to the function that I push into the respective array. In the picker directive however the value is accessed straight off of ngModelCtrl.$modelValue. I think this is what breaks the formatter and parser pipeline. I will read the post you shared though. Thanks! – Askdesigners Dec 05 '14 at 10:35
  • @Chandermani ya I dug into that too. I even had to add that priority setting to the date picking directive. I have control over the order now. It's slightly confusing though as it seems the $formatters pipeline is run in reverse order where as the $parsers run in the expected order. Or the other way around. :p I'm pretty sure a higher priority number means it gets run first actually. :0 – Askdesigners Dec 05 '14 at 10:37
  • 1
    This might help answer your question: http://stackoverflow.com/questions/22841225/angularjs-ngmodel-formatters-and-parsers – Wilhelm Jan 25 '15 at 21:14

1 Answers1

1

I mentioned this question above but the tl;dr is:

  • $Formatters change how your $modelValue will appear as a $viewValue.
  • $Parsers validate your $viewValue to be saved as an $modelValue.

Moreover, $formatters are invoked whenever the $modelValue changes, to transform the $modelValue into the $viewValue.

So, essentially $formatters format view-bound values, whereas $parsers validate data-bound values. Both $formatters and $parsers are properties with an array of functions that are applied in the order they are push()'d or unshift()'d onto the stack.

Hopefully this helps you understand the $formatters and $parsers.

Community
  • 1
  • 1
Wilhelm
  • 1,407
  • 5
  • 16
  • 32
  • Thanks. I did solve it, but it had more to do with a directive that was accessing the model directly in the directive link function, and so was bypassing the formatting parsing pipeline. :p – Askdesigners Jan 27 '15 at 10:51