草庐IT

javascript - AngularJS 验证、绑定(bind)等在使用 jQuery 插件(例如 autoNumeric)时不起作用

coder 2024-07-23 原文

我有一个 Angular 形式，它成功地使用了 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... 类。它似乎也不允许模型绑定(bind)成功。

有什么想法吗？

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

最佳答案

JQuery 和 Angular 配合不好

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

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

备选方案 #1:Angular UI

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

无论您想实现什么掩码，都可以使用他们的 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> 工具集。我没有使用过这个指令，但它是一个有趣的选项:

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 commands 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.

关于javascript - AngularJS 验证、绑定(bind)等在使用 jQuery 插件(例如 autoNumeric)时不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24067924/

autoNumericjavascriptstrongcode34jqueryangularjsmaskedinput

有关javascript - AngularJS 验证、绑定(bind)等在使用 jQuery 插件(例如 autoNumeric)时不起作用的更多相关文章

  1. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  2. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  3. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  4. ruby-on-rails - 如果为空或不验证数值，则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初，我将所有3列的:default=>0放在表格中，但我不想要这样，因为它已经填充了字段，我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  5. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  6. ruby - ruby 中的 TOPLEVEL_BINDING 是什么？ - 2

    它不等于主线程的binding，这个toplevel作用域是什么？此作用域与主线程中的binding有何不同？>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案 事实是，TOPLEVEL_BINDING始终引用Binding的预定义全局实例，而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层，它们都包含相同的绑定(bind)，但它们不是同一个对象，您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput

  7. ruby-on-rails - 如何将验证与模型分开 - 2

    我有一些非常大的模型，我必须将它们迁移到最新版本的Rails。这些模型有相当多的验证(User有大约50个验证)。是否可以将所有这些验证移动到另一个文件中？说app/models/validations/user_validations.rb。如果可以，有人可以提供示例吗？ 最佳答案 您可以为此使用关注点:#app/models/validations/user_validations.rbrequire'active_support/concern'moduleUserValidationsextendActiveSupport:

  8. ruby-on-rails - 跳过状态机方法的所有验证 - 2

    当我的预订模型通过rake任务在状态机上转换时，我试图找出如何跳过对ActiveRecord对象的特定实例的验证。我想在reservation.close时跳过所有验证!叫做。希望调用reservation.close!(:validate=>false)之类的东西。仅供引用，我们正在使用https://github.com/pluginaweek/state_machine用于状态机。这是我的预订模型的示例。classReservation["requested","negotiating","approved"])}state_machine:initial=>'requested

  9. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  10. ruby - 如何验证 IO.copy_stream 是否成功 - 2

    这里有一个很好的答案解释了如何在Ruby中下载文件而不将其加载到内存中:https://stackoverflow.com/a/29743394/4852737require'open-uri'download=open('http://example.com/image.png')IO.copy_stream(download,'~/image.png')我如何验证下载文件的IO.copy_stream调用是否真的成功——这意味着下载的文件与我打算下载的文件完全相同，而不是下载一半的损坏文件？documentation说IO.copy_stream返回它复制的字节数，但是当我还没有下

随机推荐