在 AngularJS 组件中使用时，reCaptcha 小部件并不总是显示答案

【问题标题】：reCaptcha widget not always displayed when used within AngularJS component在 AngularJS 组件中使用时，reCaptcha 小部件并不总是显示
【发布时间】：2018-01-11 16:57:11
【问题描述】：

我使用 AngularJS 并尝试在组件中嵌入 reCaptcha 小部件。组件从templateUrl 加载。几次刷新后的小部件不显示，使用浏览器的后退按钮时根本不显示。当我将 recaptcha 小部件放在布局模板（index.html）中时，不会出现问题。我尝试了 vcRecaptcha 指令，但问题仍然存在。我正在寻找一种解决方案，以便小部件即使在组件中也始终正确加载。我认为这个问题可能会导致发送额外的请求以下载组件的模板。 (templateUrl)

【问题讨论】：

标签： javascript angularjs components recaptcha

【解决方案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);
    }
})

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

【讨论】：