如何从进行 Stripe 集成的控制器中获取 DOM 元素?
Posted
技术标签:
【中文标题】如何从进行 Stripe 集成的控制器中获取 DOM 元素?【英文标题】:How to get a DOM element from the controller doing Stripe Integration? 【发布时间】:2018-07-09 21:33:23 【问题描述】:您好,我正在尝试在 AngularJS 应用程序中实现 Stripe 示例,我有一个初始化程序,它调用名为 initStripe();
的函数,这与 Stripe 示例相同:
function initStripe()
$scope.stripe = Stripe('pk_test_6pRNasdwwehFeQd4XMUh');
$scope.elements = $scope.stripe.elements();
$scope.style =
base:
color: '#32325d',
lineHeight: '18px',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder':
color: '#aab7c4'
,
invalid:
color: '#fa755a',
iconColor: '#fa755a'
;
$scope.card = $scope.elements.create('card', style: $scope.style);
//console.log( document.getElementById('body') );
$scope.card.mount('#card-element');
问题出在最后一条指令$scope.card.mount('#card-element');
,这里我得到这个错误:
您指定的选择器 (
#card-element
) 适用于任何 DOM 当前在页面上的元素。
进行测试我可以检查移动位置的 html 代码是否有效,但在我需要的 div 中无效。
<body>
<!-- here works -->
<div ng-if="currentStep == 3">
<!-- here doesn't works -->
</div>
</body>
HTML 与 Stripe 网站示例相同:
https://stripe.com/docs/stripe-js/elements/quickstart
【问题讨论】:
【参考方案1】:因此,在 angularjs 中隐藏和显示 div 有两种不同的方法,ng-if
和 ng-show
或 ng-hide
。如果您将ng-if
更改为ng-show
,逻辑可以保持不变,但它应该可以工作。解释如下。
ng-if
如果评估结果为 false,则通过从 DOM 中完全删除元素和任何子元素来工作。这意味着当试图在 ng-if
中找到任何评估为 false 的内容时,任何类型的元素选择器都会失败。
ng-show
和 ng-hide
如果评估为隐藏,则使用 display: hide
工作。这允许您仍然使用元素选择器选择它们,但隐藏它们不被显示。
在您看到的问题中,它正在寻找您的 ng-if
内的元素,并且由于您的 ng-if
评估为 false,因此找不到该元素。
【讨论】:
很好的答案!我真的知道其中的区别,但我从来不认为这是原因。以上是关于如何从进行 Stripe 集成的控制器中获取 DOM 元素?的主要内容,如果未能解决你的问题,请参考以下文章
Stripe Elements React - 如何从父组件获取条带数据?
如何从 Stripe 结帐表单中删除“在任何地方记住我”选项