如何從執行Stripe集成的控制器中獲取DOM元素？

Question

嗨，我試圖在AngularJS應用程序中實現Stripe示例，我有一個初始化函數，該初始化函數調用名為initStripe();的函數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

Answer 1

因此，有兩種不同的方法可以在angularjs中隱藏和顯示div，即ng-if和ng-show或ng-hide 。 如果將ng-if更改為ng-show ，則邏輯可以保持不變，但是應該可以。 以下說明。

ng-if通過將元素和所有子元素從DOM中完全移除（如果它的評估結果為false）來工作。 這意味着當嘗試在ng-if查找任何東西ng-if評估為false）時，任何類型的元素選擇器都將失敗。

ng-show和ng-hide通過使用display: hide進行工作display: hide如果評估為display: hide則將其隱藏。 這樣，您仍然可以使用元素選擇器選擇它們，但不會顯示它們。

在您看到的問題中，它正在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