使用jQuery插件时AngularJS验证,绑定等不起作用(例如autoNumeric)

Question

我有一个角度形式,成功使用角度的内置验证.以下面的标记为例:

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

浏览器加载时,输入字段会像这样呈现(删除了不必要的属性):

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

如果我在输入字段中输入值,则标记变为:

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

所有这一切都很有效.然后我实现了两个jQuery插件来实现窗体的一些屏蔽/输入格式: autoNumeric和jQuery.maskedinput.现在,我所做的一切都不会改变ng-pristine ng-invalid...输入上的原始类.它似乎也不允许模型的绑定成功.

有任何想法吗？

我尝试创建一个http://jsfiddle.net/ma44H/3/,但似乎无法弄清楚如何让它工作.

Answer 1

JQuery和Angular不能很好地合作

巧克力和花生酱味道很好,但AngularJS和JQuery是一个痛苦的组合.我们都尝试过(取得了不同的成功)来实现这一目标.

问题是JQuery DOM操作在AngularJS Digest Cycle之外工作.经验教训通常是使用纯Angular更好.

备选方案#1:Angular UI

尝试Angular-UI.每个Angular Developer都可以使用的工具集.

无论你想要实现什么面具都可以使用他们的ui-mask指令:

想要日期面具吗？

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

货币面具？

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

手机面膜？

    <input type="text" ng-model="phone" ui-mask="1 (999) 999-9999" />

:

见小提琴

:

备选方案#2:过滤器

Angular有内置过滤器:

货币:

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

日期:

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

坚持使用JQuery？尝试使用angular-ui工具集中的jQuery Passthrough指令.我没有使用这个指令,但它是一个有趣的选择:

要调用$ .fn.tooltip()之类的东西,只需执行ui-jq ="tooltip".请注意,函数的名称必须相同.这也适用于普通的jQuery命令,例如$ .fn.slideUp().

要传递参数,请使用ui-options属性.该值将在$ scope上下文中计算并传递给函数.如果设置了默认值,则传递的选项将扩展它们.如果传递了字符串,则将忽略默认选项.

在uiJqConfig中使用指令名称jq作为命名空间.然后通过该函数的名称为每个函数提供子命名空间选项(与传递给ui-jq的完全相同),这样您每次调用该指令时都不必传递选项.