gpt4 book ai didi

javascript - 如何从执行 Stripe Integration 的 Controller 中获取 DOM 元素?

转载 作者:太空宇宙 更新时间:2023-11-04 01:23:37 24 4
gpt4 key购买 nike

您好,我正在尝试在 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');,这里我得到这个错误:

The selector you specified (#card-element) applies to no DOM elements that are currently on the page.

做测试我可以检查移动 position 的 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

最佳答案

所以,在angularjs中有两种不同的隐藏和显示div的方法,ng-ifng-show或者ng-hide .如果将 ng-if 更改为 ng-show,逻辑可以保持不变,但它应该可以工作。解释如下。

ng-if 的工作原理是,如果它的计算结果为 false,则从 DOM 中完全删除该元素和所有子元素。这意味着当试图在评估为 false 的 ng-if 中查找任何内容时,任何类型的元素选择器都会失败。

ng-showng-hide 如果评估为隐藏,则通过使用 display: hide 来工作。这允许您仍然使用元素选择器选择它们,但隐藏它们不被显示。

在您看到的问题中,它正在寻找 ng-if 中的元素,并且由于您的 ng-if 计算结果为 false,因此该元素是没有被发现。

关于javascript - 如何从执行 Stripe Integration 的 Controller 中获取 DOM 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48530901/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com