reCaptcha widget在AngularJS组件中使用时并不总是显示

Question

我使用AngularJS并尝试在组件中嵌入reCaptcha小部件。组件从templateUrl加载。几次刷新后的小部件不显示，使用浏览器的后退按钮时根本不显示。 当我将 recaptcha 小部件放在布局模板(索引.html(中时，没有问题发生。 我尝试了 vcRecaptcha 指令，但问题保持不变。我正在寻找一种解决方案，以便即使在组件中也能始终正确加载小部件。 我认为该问题可能会导致发送其他请求以下载组件的模板。(templateUrl(

Answer 1

问题是由竞争条件引起的，即在带有g-recaptcha小部件的组件之前加载了 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);
}
})

现在脚本总是在组件之后加载。