AngularJSコンポーネント内で使用するとreCaptchaウィジェットが表示されない

Question

私はAngularJSを使用し、コンポーネント内にreCaptchaウィジェットを埋め込もうとしました。コンポーネントはtemplateUrlからロードされます。いくつかのリフレッシュ後のウィジェットは表示されず、ブラウザの戻るボタンを使用すると表示されません。 レイアウトテンプレート（index.html）にrecaptchaウィジェットを配置すると問題は発生しません。 私は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); 
    } 
}) 

スクリプトは常にコンポーネントの後に読み込まれます。