javascript - 如何获取 Angular 输入指令数据以传递给 Controller

Question

我正在使用 angular-credit-cards创建信用卡表格。信用卡号具有以下设置:

<!--... form stuff ...-->
<div class="form-group" ng-class="{'has-success': donationForm.ccNumber.$valid}">
  <label for="ccNumber">Credit Card Number</label>
  <div class="input-group">
    <input type="text" class="form-control" name="ccNumber" ng-model="credit_card.number" cc-number cc-eager-type/>
    <div class="input-group-addon">{{donationForm.ccNumber.$ccEagerType}}</div>
  </div>
</div>
<!--... more form stuff ...-->

提交此表单后，它会调用创建 Paypal 付款的函数。 Paypal 付款需要信用卡类型。 angular-credit-cards根据 cc-number 指令所属的输入动态确定信用卡类型，并将其存储在输入的 $ccEagerType 中。但是，如何从输入中获取这些数据并将其交给 Controller ？

我尝试了以下方法:

<input type="hidden" ng-model="credit_card.type" ng-value="donationForm.ccNumber.$ccEagerType"/>

但是 donationForm.ccNumber.$ccEagerType 没有绑定(bind)到 credit_card.type。

提前致谢。

Answer 1

阅读 readme.md在那个 github 项目中，我们发现了这个:

The eagerly matched type will be available as $ccEagerType on the model controller.

您可以通过表单名称和输入名称在您的父 Controller 中访问它:

$scope.donationForm.ccNumber.$ccEagerType

在你的情况下 ccNumber是输入名称。 donationForm是表单的推断名称，尽管您尚未在代码中发布它。

Ben Drucker 在他的自定义指令中需要 ngModelController ccNumber .阅读AngularJS documentation about ngModelController关于如何处理从指令内部修改它。

编辑: (来自 angular-credit-cards 的作者)

我建议避免使用隐藏输入。你最好明确地将值添加到你的请求主体到 PayPal，而不是隐式绑定(bind)它。

此外，您应该考虑使用 $ccType对于全卡。 Eager typing 旨在显示发行者 Logo 或其他 UI 功能。 $ccType匹配完整卡号的更严格的正则表达式。有可能达到 $ccEagerType 的状态已定义但 <input/>无效，因此 $ccType未定义。