7

我有一个角度形式，它成功地使用了角度的内置验证。以以下标记为例：

<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/，但似乎无法弄清楚如何让它工作。

4

1 回答 1

9

JQuery 和 Angular 合作不好

巧克力和花生酱混合在一起味道很好，但是AngularJS和JQuery是一种痛苦的组合。我们都尝试过（取得了不同程度的成功）来实现这一目标。

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

备选方案#1：Angular UI

试试Angular-UI。每个 Angular 开发人员都可以使用的工具集。

无论您想实现什么 Mask，都可以使用他们的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 上下文中评估并传递给函数。如果设置了默认值，则传递的选项将扩展它们。如果传递了一个字符串，则默认选项将被忽略。

使用指令名称 jq 在 uiJqConfig 中进行命名空间。然后通过该函数的名称为每个函数设置子命名空间选项（就像它传递给 ui-jq 一样），这样您就不必每次调用指令时都传递选项。

于 2014-06-10T02:59:27.687 回答