在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); 
    } 
}) 

现在脚本始终在组件后加载。