如何从执行Stripe集成的控制器中获取DOM元素？

Question

Hi I'm trying to implement Stripe example in an AngularJS application, I have a initializer that calls a function named initStripe(); 嗨，我试图在AngularJS应用程序中实现Stripe示例，我有一个初始化函数，该初始化函数调用名为initStripe();的函数initStripe(); this works equal to the Stripe example: 这等效于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');
}

The problem is in the last instruction $scope.card.mount('#card-element'); 问题出在最后一条指令$scope.card.mount('#card-element'); , here I get this error: ，在这里我得到这个错误：

The selector you specified ( #card-element ) applies to no DOM elements that are currently on the page. 您指定的选择器（ #card-element ）不应用于页面上当前没有的DOM元素。

Doing tests I can check that moving the HTML code of position works, but not works in the div I need. 做测试，我可以检查是否可以移动位置的HTML代码，但不能在需要的div中工作。

<body>
<!-- here works -->
   <div ng-if="currentStep == 3">
    <!-- here doesn't works -->
   </div>
</body>

The HTML is the same of the Stripe website example: HTML与Stripe网站示例相同：

https://stripe.com/docs/stripe-js/elements/quickstart https://stripe.com/docs/stripe-js/elements/quickstart

Answer 1

So, there are two different ways to hide and show divs in angularjs, ng-if and ng-show or ng-hide . 因此，有两种不同的方法可以在angularjs中隐藏和显示div，即ng-if和ng-show或ng-hide 。 If you change your ng-if to ng-show , the logic can remain the same, but it should work. 如果将ng-if更改为ng-show ，则逻辑可以保持不变，但是应该可以。 Explanation below. 以下说明。

ng-if works by completely removing the element and any children elements from the DOM if it evaluates to false. ng-if通过将元素和所有子元素从DOM中完全移除（如果它的评估结果为false）来工作。 This means any sort of element selector will fail when trying to find anything inside of an ng-if evaluating to false. 这意味着当尝试在ng-if查找任何东西ng-if评估为false）时，任何类型的元素选择器都将失败。

ng-show and ng-hide work by using display: hide if evaluated to be hidden. ng-show和ng-hide通过使用display: hide进行工作display: hide如果评估为display: hide则将其隐藏。 This allows you to still select them with an element selector, but hide them from being displayed. 这样，您仍然可以使用元素选择器选择它们，但不会显示它们。

In the problem you are seeing, it is looking for the element inside of your ng-if , and since your ng-if evaluates to false, that element is not being found. 在您看到的问题中，它正在ng-if内寻找元素，并且由于ng-if值为false，因此找不到该元素。

如何从执行Stripe集成的控制器中获取DOM元素？

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-01-30 21:48:19

如何从执行Stripe集成的控制器中获取DOM元素？

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-01-30 21:48:19

解决方案1
2 已采纳 2018-01-30 21:48:19