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

【问题标题】：How to get a DOM element from the controller doing Stripe Integration?如何从进行 Stripe 集成的控制器中获取 DOM 元素？
【发布时间】：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

【问题讨论】：

标签： javascript jquery html css angularjs

【解决方案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，因此找不到该元素。

【讨论】：

很好的答案！我真的知道其中的区别，但我从来不认为这是原因。