Question

我有一个成功使用angular的内置验证的角形。以下面的标记为例：

<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" />

的 See Fiddle

备选方案＃2：过滤器

Angular有内置过滤器：

货币：

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

日期：

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

坚持使用JQuery？尝试 angular-ui <的 jQuery Passthrough 指令/ strong>工具集。我没有使用这个指令，但这是一个有趣的选择：


要调用类似$ .fn.tooltip（）的内容，只需执行ui-jq =“tooltip”即可。注意   函数的名称必须相同。这也适用于   普通的jQuery命令，如$ .fn.slideUp（）。

要传递参数，请使用ui-options属性。价值将是   在$ scope上下文中计算并传递给函数。如果   默认设置已设置，传递的选项将扩展它们。如果是一个字符串   传递后，默认选项将被忽略。

在uiJqConfig中使用指令名称jq作为命名空间。然后   每个函数的子命名空间选项由该函数的名称   （正如传递给ui-jq一样），这样你就不必通过了   每次调用指令时都有选项。

使用jQuery插件时AngularJS验证，绑定等不起作用（例如autoNumeric）

1 个答案:

的 See Fiddle