Getting My Directive More Like Angular-UI Mask

[Alan Klement]

I'd like some input on how well I wrote this directive. Am I making proper Angular design decisions here?  Is there a better way to do this? I'm applying the formatting on the 'blur' event - which I'd rather have a better way to do.

I'd like this to be more like the Mask directive found in Angular-UI. Notice how the formatting is applied while the user types.

I used to call $setViewValue within the parser; however, when I did this the curser would get 'locked'. I notice that in the Angular UI version, it seems the numbers are just being pushed from left to right: 

12345 -> 12[add X]345 -> 12X34 

Notice how the '5' got pushed off. It seems that the whole value is not being replaced at once - which is what I was doing.

I sniffed around the source code for the Angular UI Mask directive but it was quite overwhelming - there's a lot going on in there...

Any advice?

Thanks guys.

[Sander Elias]

Hi Alan,

I mucked around with your directive a bit. have a look http://plnkr.co/edit/kxjm7p?p=preview

Took a different approach on it, it is now impossible to enter anything else but a number (unless they paste something in, but that can be handled too..)

you can handle the formatting on the blur if you prefer.

Regards

Sander

[Alan Klement]

Interesting, You're editing the CSS and not doing a $setViewValue. I was hoping to avoid it because I don't know how it would work with IE.

Thanks for the idea and help.

[Sander Elias]

Hi Alan,

I know I did this sort of thing in IE, way back, when I was still supporting it. So I just checked, and both the css, and the event should work fine in there.

Regards

Sander