javascript - AngularJS validation, binding, etc. not working when using jQuery plugins (eg. autoNumeric) - Stack Overflow

admin管理员组

文章数量:1355590

I have an angular form which was using angular's built-in validation successfully. 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 renders like this (unnecessary attributes removed):

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

If I were to enter a value in the input field, the markup turns into:

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

All of this was working great. Then I implemented two jQuery plugins to implement some masking/input formatting for the form: autoNumeric and jQuery.maskedinput. Now, nothing I do will change the original ng-pristine ng-invalid... classes on the input. It also doesn't seem to allow the binding of models to be successful either.

Any ideas?

I tried creating a /, but can't seem to figure out how to get it to work.

I have an angular form which was using angular's built-in validation successfully. 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 renders like this (unnecessary attributes removed):

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

If I were to enter a value in the input field, the markup turns into:

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

All of this was working great. Then I implemented two jQuery plugins to implement some masking/input formatting for the form: autoNumeric and jQuery.maskedinput. Now, nothing I do will change the original ng-pristine ng-invalid... classes on the input. It also doesn't seem to allow the binding of models to be successful either.

Any ideas?

I tried creating a http://jsfiddle/ma44H/3/, but can't seem to figure out how to get it to work.

• javascript
• jquery
• angularjs
• maskedinput

Share Improve this question Follow edited Jun 10, 2014 at 3:12 Dave Alperovich 32.5k88 gold badges8282 silver badges101101 bronze badges asked Jun 5, 2014 at 18:47 mellis481mellis481 4,1671212 gold badges7777 silver badges130130 bronze badges 1

• Regrettably, I haven't had time to test them because of the intensity of my current project. While the built-in Angular UI mask may be OK for date and phone, it's unacceptable for currency because, using your example, you couldn't do $50.75. The number of digits needs to match which isn't reasonable. I haven't had a chance to try the other two suggestions, but given the time you have to answer my question, I'll mark your answer correct so you get the bounty. – mellis481 Commented Jun 16, 2014 at 0:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9 +100

JQuery and Angular do not cooperate well

Chocolate and Peanut Butter taste great together, but AngularJS and JQuery are a painful mix. We've all tried (with varying success) to acplish this.

The problem is that JQuery DOM manipulation works outside of AngularJS Digest Cycle. The lesson is usually that using pure Angular is better.

Alternative #1: Angular UI

Try Angular-UI. Set of tools every Angular Developer could use.

Whatever Mask you want to implement can be done with their 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 (999) 999-9999" />

:

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 toolset. I haven't made use of this directive but it's an intriguing option:

To call something like $.fn.tooltip() simply do ui-jq="tooltip". Note that the name of the function must be identical. This also works for normal jQuery mands such as $.fn.slideUp().

To pass parameters use the ui-options attribute. The value will be evaluated in the $scope context and passed to the function. If defaults are set, the passed options will extend them. If a string is passed, the default options will be ignored.

Use the directive name jq for namespacing inside uiJqConfig. Then sub-namespace options for each function by the name of that function (exactly as it is passed to ui-jq) so that you don't have to pass options every time you call the directive.

本文标签：