在AngularJS組件中使用reCaptcha小部件時不總顯示

Question

我使用AngularJS並試圖在組件中嵌入reCaptcha小部件。組件從templateUrl加載。部分刷新後的Widget不顯示，並且在使用瀏覽器的後退按鈕時根本不顯示。 當我將recaptcha小部件放置在佈局模板（index.html）中時，不會出現任何問題。 我試過vcRecaptcha指令，但問題保持不變。我正在尋找一個解決方案，以便即使在組件中也能正常加載小部件。 我認爲這個問題可能會導致發送下載組件模板的附加請求。 （templateUrl）

Answer 1

問題是由於競爭條件造成的，也就是說，在組件之前加載了recaptcha腳本，並在組件之前加載了g-recaptcha小部件。在組件控制器中注入腳本解決了問題。

module.component("component_name", { 
    templateUrl: "component_name/component_name.html", 
    controller: function(){ 
     var script = document.createElement("script"); 
     script.setAttribute("src", "https://www.google.com/recaptcha/api.js"); 

     var el = document.getElementsByTagName("component_name")[0]; 
     el.appendChild(script); 
    } 
}) 

現在腳本始終在組件後加載。