如何获取 Angular 输入指令数据以传递给控制器

Posted 2023-02-22

【中文标题】如何获取 Angular 输入指令数据以传递给控制器

【英文标题】：How to get Angular Input Directive Data to Pass to Controller

【发布时间】：2015-06-11 17:31:35

【问题描述】：

我正在使用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 中。但是，如何从输入中获取这些数据并将其交给控制器？

我尝试了以下方法：

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

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

提前致谢。

【参考方案1】：

阅读 readme.md 的那个 github 项目，我们发现：

热切匹配的类型将在模型控制器上以$ccEagerType 的形式提供。

您可以通过表单名称和输入名称在您的父控制器中访问它：

$scope.donationForm.ccNumber.$ccEagerType

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

Ben Drucker 在他的自定义指令 ccNumber 中需要 ngModelController。阅读AngularJS documentation about ngModelController，了解如何处理从指令内部修改的内容。

编辑： （来自 angular-credit-cards 的作者）

我建议避免使用隐藏输入。最好将请求正文的值显式添加到 PayPal，而不是隐式绑定它。

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

【讨论】：

我看到了，但也许我误解了这意味着什么。这是否意味着我可以“导入”类似于 $scope、$resource 等的 $ccEagerType？所以我的控制器看起来像：app.controller('MyController', ['$scope', '$resource', '$ccEagerType',..., function ($scope, $resource, $ccEagerType, ...) ...; 当我这样做时，我得到一个 $injector:unpr 错误。抱歉...这里是 AngularJS 菜鸟。

我理解这一点就像你的MyController 中的$scope.$ccEagerType。如果它是包装该指令的那个。顺便说一句，在 README.md 中有一个显示卡片类型的示例。这不是你想要达到的目标吗？

不幸的是，当我在表单提交函数中检查调试器时，我没有在 $scope 下看到 $ccEagerType。我会尝试在 github repo 上发布一个问题。

这里是角度信用卡的作者。基里尔的回答是正确的。类型为$scope.donationForm.ccNumber.$ccEagerType。我建议避免使用隐藏输入。最好将请求正文的值显式添加到 PayPal，而不是隐式绑定它。

另外，您应该考虑将$ccType 用于全卡。 Eager typing 旨在显示发行者徽标或其他 UI 功能。 $ccType 匹配完整卡号的更严格的正则表达式。可以实现一个状态，其中定义了$ccEagerType，但<input/> 无效，因此$ccType 是undefined。

【参考方案2】：

隐藏元素似乎有问题，ng-model 绑定不起作用。

Angular 模型绑定在发布表单时未传递隐藏字段

试试下面的代码

<input type="text" style="display: none;" ng-model="credit_card.type" 
ng-value="donationForm.ccNumber.$ccEagerType"/>

Refer this SO Answer

【讨论】：

不幸的是，这不起作用。也许它与我的表单正在进行的一些 html5 验证有关？我现在在表单上有 novalidate 属性。