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

Question

我使用 AngularJS 并尝试在组件中嵌入 reCaptcha 小部件。组件从 templateUrl 加载。刷新几次后小部件不显示，使用浏览器的后退按钮时根本不显示。 当我将 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);
    }
})

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