Angle check, snap, etc. Doesn't work when using jQuery plugins (e.g. autoNumeric)

Question

I have an angular form that successfully uses angular inline validation. Take the following markup, for example:

<form name="numberForm" novalidate> <input type="text" required /> <button type="submit">Submit</button> </form> 

When the browser loads, the input field is displayed like this (unnecessary attributes are deleted):

 <input class="ng-pristine ng-invalid ng-invalid-required" /> 

If I need to enter a value in the input field, the markup will turn into:

 <input class="ng-dirty ng-valid ng-valid-required" /> 

This all works great. Then I implemented two jQuery plugins to implement some masking / formatting input for the form: autoNumeric and jQuery.maskedinput . Now, nothing I do will change the source classes ng-pristine ng-invalid... in the input. It also does not seem to be able to tie models to success.

Any ideas?

I tried to create http://jsfiddle.net/ma44H/3/ but cannot figure out how to make it work.

Answer 1

JQuery and Angular interact poorly

Chocolate and peanut butter go great, but AngularJS and jQuery are a painful mix. We all tried (with varying success) to accomplish this.

The problem is that the jQuery DOM manipulation works outside of the AngularJS digest loop . The lesson usually is that it is better to use pure Angular.

Alternative # 1: Angular UI

Try Angular -UI . A set of tools, each of which the Angular developer can use.

Any mask you want to implement can be done using the ui-mask directive:

Want a date mask?

  <input type="text" ng-model="date" ui-mask="99/99/9999" /> 

Currency mask?

  <input type="text" ng-model="currency" ui-mask="$99999999.99" /> 

Phone mask?

  <input type="text" ng-model="phone" ui-mask="1 [phone]" /> 

:

See Fiddle

:

---

Alternative # 2: Filters

Angular has built-in filters:

Currency:

 $filter('currency')(amount, symbol) 

Date:

 $filter('date')(date, format) 

---

Insist on using jQuery? Try the jQuery Passthrough directive from the Angular -ui suite . I have not used this directive, but this is an intriguing option:

To call something like $ .fn.tooltip (), just do ui-jq = "tooltip". Note that the function name must be identical. It also works with regular jQuery commands, such as $ .fn.slideUp ().

The ui-options attribute is used to pass parameters. The value will be evaluated in the context of $ scope and passed to the function. If default values ​​are set, the passed parameters will expand them. If a string, the default parameters will be ignored.

Use the jq directive name to place the names inside uiJqConfig. then the subspace parameters for each function by the name of that function (just like ui-jq passes it), so you don’t have to go through every time you call the directive.